一尘不染

如何使用jquery显示自定义样式输入文件的文件名?

css

我已经使用CSS设置了文件输入的样式:

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}


<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

一切正常,但是我想显示所选的文件名。使用CSS或jQuery怎么可能?


阅读 258

收藏
2020-05-16

共1个答案

一尘不染

您必须绑定并触发[type=file]元素上的change事件,并将文件名读取为:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});


.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>
2020-05-16