追加元素輸入控制

Question

我有兩個輸入按鈕，允許用戶將文件

<input type="file" id="fileUpload" name="files" multiple><br/>           
<div id="selectedFiles"></div> 

上傳到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 />")); 
}); 

我需要做什麼是在每個按鈕下追加文件列表。有關如何這樣做的任何想法？

Answer 1

將$('#selectedFiles').append替換爲$(this).after。可能應該將所有文件都包含在列表中以保持清潔。這裏有一個更好的辦法：

$(this).after('<ul><li>' + listOfFiles.join('<li>') + '</ul>') 

下面是最後的代碼（我清理了一點點）：

$(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>'); 
    }); 
});