selected file name is not displaying

Question

I have choose file input code,i need to change the text of the choose file and there should be a required keyword this working fine,but i want show the selected file below the button. Here is the fiddle here is my code:

<form>
 <div>
  upload
  <input type="file" class="hide_file" required>
 </div>
 <br><br>
 <button type="submit" id="save" class="btn btn-default wf-save" >SAVE</button>
</form>

css:

div{
  padding:5px 10px;
  background:#00ad2d;
  border:1px solid #00ad2d;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;

}

how to show the file name below the upload button.can anyone suggest how to do.

You need to add a javascript that triggers in the onClick of your button. — Galen Nare, Apr 18 '18 at 11:34
Create a function that shows the filename in a script tag and then call it in your button's onClick: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick Better yet use an onInput in your input. — Galen Nare, Apr 18 '18 at 12:03

score 4 · Accepted Answer · answered Apr 18 '18 at 11:47

Actually, it was there. It was just hidden because of your CSS. You may create a new element then it will hold the filename.

$('.hide_file').change(function() {
  var filename = $(this).val();
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  $('#filename').text(filename);
});

div {
  padding: 5px 10px;
  background: #00ad2d;
  border: 1px solid #00ad2d;
  position: relative;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  float: left;
  cursor: pointer
}

.hide_file {
  position: absolute;
  z-index: 1000;
  opacity: 0;
  cursor: pointer;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 24px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    upload
    <input type="file" class="hide_file" required value="">

  </div>
  
  <br><br>
  <button type="submit" id="save" class="btn btn-default wf-save">SAVE</button>

</form>
<p id="filename"></p>

Reference from here.

selected file name is not displaying

1 Answers1