列出从文件输入中选择的文件

我想列出从文件输入中选择的文件。

  <div class="fileUpload myButton">
    <span>Upload</span>
    <input type="file" name="imageURL[]" id="imageURL" multiple="" class="file" />
  </div>
    <div id="file-list">
  </div>

我有这个代码

(function () {
var filesUpload = document.getElementById("imageURL"),z
    fileList = document.getElementById("file-list");

function uploadFile (file) {
    var li = document.createElement("li"),
        div = document.createElement("div"),            
        reader,
        xhr,
        fileInfo;

    li.appendChild(div);

    // Present file info and append it to the list of files
    fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
    div.innerHTML = fileInfo;

    fileList.appendChild(div);
}

function traverseFiles (files) {
    if (typeof files !== "undefined") {
        for (var i=0, l=files.length; i<l; i++) {
            uploadFile(files[i]);
        }
    }
    else {
        fileList.innerHTML = "<div class=\"neutral\">Your browser does not support Multiple File Upload, but you can still upload your file. We recommend you to upload to a more modern browser, like <a href=\"http://google.com/chrome\" target=\"_blank\">Google Chrome</a> for example.<div>";
    }   
}

filesUpload.addEventListener("change", function () {
    traverseFiles(this.files);
}, false);


     })();

但问题是，当用户选择另一个文件时，它会添加到列表中，但提交表单时旧文件不会上传。

简化：当用户选择file1.pdf和file2.pdf时 该列表显示 file1.pdf 和 file2.pdf 当他再次选择另一个文件 file3.pdf 和 file4.pdf 时 该列表显示 file1.pdf 、 file2.pdf 、 file3.pdf 和 file4.pdf 但当他提交表单时，仅上传 file3.pdf 和 file4.pdf

我的问题是如何删除列表中不会上传的文件。 或者上传列表中所有文件的方法。 提前致谢。

发生的情况是，选择更多文件时输入被清空，因此不会上传之前显示的文件。

解决方案1：为了解决这个问题，您可以在change事件处理程序，尽管这可能会变得非常混乱。 您必须从上传的所有输入中获取所有文件。您尚未显示实际的上传代码，因此我无法在上下文中给出示例：

filesUpload.on("change", function () {
    traverseFiles(this.files); //Add initial files to list
    create_new_input();
}
function create_new_input() {
    var new_input = $('<input type="file" />'); //create file selector
    new_input.on("change", function() {traverseFiles($(this).get(0).files);}); //
    $('body').append(new_input); //Add this input to your page
}, false);

您必须将收到的所有文件添加到traverseFiles到xhr。这个例子使用了 jQuery，我建议你一直使用它！

解决方案2: 否则，您可以在输入更改时清空文件列表框：

filesUpload.addEventListener("change", function () {
    document.getElementById('file-list').innerHTML = "";
    traverseFiles(this.files);
}, false);

祝你好运！