/
Question & Réponse
/
How to display file name for custom styled input file using jquery

How to display file name for custom styled input file using jquery

Jquery
Développement Front-end

//HTML
<form>
  <label for="attach-upload" class="custom-attach-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="attach-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

//js (Import JQUERY)
$('#attach-upload').change(function() {
  var i = $(this).prev('label').clone();
  var attach = $('#attach-upload')[0].files[0].name;
  $(this).prev('label').text(attach);
});

//CSS
.custom-attach-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;