Question

我使用以下jQuery从隐藏字段中获取文件名，然后将其附加到HTML中的文件名类。

filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/]/g, '');
$(".filename").text(filenameCache);

<input id="example-marketing-material-file-cache" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />

但是，我在同一页面上有三个文件附件。我可以重复这个代码三次更改每个的类和ID名称，但这不是很干。获取每个附件字段的文件名而不重复自己的最佳方法是什么？

Answer 1

为文件字段提供类似“file_upload”的公共类，可以使用text(fn)循环文件名字段并更新实例

$files=$('.file_upload');
// loops over all in selector and updates instances
$(".filename").text(function(idx , txt){
    return $files.eq(idx).val().replace(/^.*[\\\/]/g, '');
});

这假设您有3个，并且页面

中有匹配的索引

如果只有一个文件名字段

$(".filename").text(function(idx , txt){
    return $.map($files, function(el){
          return el.value.replace(/^.*[\\\/]/g, '');
    }).join(", ");
});

Answer 2

给他们一个共同的clas，捕获它们并循环它们。

由于您使用的是jquery，因此可以使用.each

HTML

<input class="filename-input" value="some.pdf"/>
<input class="filename-input" value="other.pdf"/>
<input class="filename-input" value="another.pdf"/>

JS

var filenames = [];
jQuery(".filename-input").each(function(){
   filenames.push( jQuery(this).val().replace(/^.*[\\\/]/g, '') );
});
jQuery(".filename").text(filenames.join(" "));

演示

var filenames = "";
jQuery(".filename-input").each(function(){
  filenames += jQuery(this).val().replace(/^.*[\\\/]/g, '')+" ";
});
jQuery("#log").text(filenames);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="filename-input" type="hidden" value="some.pdf"/>
<input class="filename-input" type="hidden" value="other.pdf"/>
<input class="filename-input" type="hidden" value="another.pdf"/>    

<div id="log"></div>

Answer 3

HTML：

<div class="filename"></div>
<div id="container">
<input id="example-marketing-material-file-cache1" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />
<input id="example-marketing-material-file-cache2" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />
<input id="example-marketing-material-file-cache3" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />

JS：

var inputs = $('#container input');
var fileNames = [];
$.each(inputs,function(index,input){

var value = $(input).val();
if(value){
    fileNames.push(value.replace(/^.*[\\\/]/g, ''));
}  

});

$(".filename").text(fileNames.join('|'));

jsfiddle

使用jQuery显示多个附件文件名

3 个答案: