[英]Append element to input control
I have Two input buttons that allow user to upload files 我有两个输入按钮,允许用户上传文件
<input type="file" id="fileUpload" name="files" multiple><br/>
<div id="selectedFiles"></div>
into the selectedFiles div i append a list of file names: 在selectedFiles div中,我附加了一个文件名列表:
$('input:file').on('change', function() {
//$('.file').bind('change', function() { // is duprecated
var files = this.files;
var listOfFiles = [];
for(var i=0; i < files.length; i++) {
//var filename = files[i].name + "<br />";
//$("#selectedFiles").append(filename);
listOfFiles.push(files[i].name);
}
$('#selectedFiles').append(listOfFiles.join("<br />"));
});
What i need to do is to append the list of files under each button. 我需要做的是在每个按钮下附加文件列表。 any idea on how to do so?
关于如何做的任何想法?
Replace $( '#selectedFiles' ).append
with $(this).after
. 将
$( '#selectedFiles' ).append
替换$( '#selectedFiles' ).append
$(this).after
。 Probably should wrap all the files inside a list for cleanliness. 可能应该将所有文件包装在列表中以保持整洁。 Here's a better way:
这是一个更好的方法:
$(this).after('<ul><li>' + listOfFiles.join('<li>') + '</ul>')
Here's the final code (I cleaned it up a little): 这是最终的代码(我整理了一下):
$(function() {
$( '.upload_files_input' ).on('change', function() {
var file_names = Array.prototype.slice.call(this.files).map(function(file) {
return file.name;
});
$(this).after('<ul><li>' + file_names.join('<li>') + '</ul>');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.