將元素追加到輸入控件

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