列出文件输入中的选定文件

Question

我想从文件输入中列出所选文件.

  <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

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

Answer 1

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

解决方案 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);

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

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

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

祝你好运！