使用jQuery顯示多個附件文件名

我使用以下jQuery從隱藏字段中獲取文件名，然後將其附加到我的HTML文件名類中。使用jQuery顯示多個附件文件名

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的名稱，但這不是非常乾燥。獲取每個附件字段的文件名而不重複自己的最佳方式是什麼？

來源

2015-05-08 Thomas Taylor

也許giive類，並使用每個（）函數？ –

謝謝你的評論，你可以請提供一個例子。 –

給出的文件中的字段一個通用類像「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(", "); 
});

來源

2015-05-08 02:27:29 charlietfl

很好的答案謝謝。愚蠢的問題，但idx的索引是否正確？ –

給他們一個共同的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"/>

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>

來源

2015-05-08 02:27:08

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

來源

2015-05-08 02:43:00 Yangguang

使用jQuery顯示多個附件文件名

回答

相關問題