上传文件时将文件名应用于标签

Question

我已隐藏文件上传器输入字段。我使用标签（所以我可以设置它的样式）作为可点击元素来上传文件。这是jsFiddle

我添加了一个 JS 解决方法来更改标签的文本，因此当您选择文件时，文本“上传文件”将替换为实际文件名。

我的问题是让我的代码与多个文件上传器一起工作。使用下面的代码，无论我点击哪个文件上传器，文件名始终只填充第一个文件上传字段：

HTML

<p class="hide_this"><span class="wpcf7-form-control-wrap file-02"><input type="file" name="file-02" size="40" class="wpcf7-form-control wpcf7-file" id="file-01" aria-invalid="false"></span><label for="file-01"><span>Upload a file</span></label></p>

<p class="hide_this"><span class="wpcf7-form-control-wrap file-03"><input type="file" name="file-03" size="40" class="wpcf7-form-control wpcf7-file" id="file-02" aria-invalid="false"></span><label for="file-02"><span>Upload a file</span></label></p>

<p class="hide_this"><span class="wpcf7-form-control-wrap file-04"><input type="file" name="file-04" size="40" class="wpcf7-form-control wpcf7-file" id="file-03" aria-invalid="false"></span><label for="file-03"><span>Upload a file</span></label></p>

JS

$('input[type=file]').change(function(){
  var filename = $(this).val().split('\\').pop();
  var idname = $(this).attr('id');
  $('.'+idname).next().find('span').html(filename);
});

Answer 1

这对您不起作用的原因是您的 ids 不匹配。您只需使<input> 的id 与相关<span> 的id 匹配。

这是一个更新的小提琴：https://jsfiddle.net/m7eqj9ku/1/

---

注意：不要忘记设置你的小提琴以使用外部库

Answer 2

试试这个$('label[for="'+idname+'"]').find('span').html(filename);