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

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

Answer 2

这不适合你的原因是你的id不匹配。您只需要将id的{{1}}与相关<input>的{{1}}匹配。

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

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

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

2 个答案: