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);

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

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

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

祝你好运！

Answer 2

您的问题是您多次操纵输入值。第二次有人使用html文件输入选择文件时，最初选择的文件将从输入值属性“覆盖”。

您可以挂钩表单提交并添加已存储在html中的文件。另一种方法是使用多个文件输入元素。

因此，每当有人选择文件并将其添加到您的html时，隐藏旧文件输入并添加一个新文件...

像这样调整你的HTML代码：

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

像这样调整您的Javascript：

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

    li.appendChild(div);

    // now here we receive the HTML input element for the files.
    var currentInput = $('#imageURL');
    var imageUrlInputsCount = $('.imageUrlInput').length;
    // now we change the 'id' attribute of said element because id's should be unique right?
    currentInput.attr('id','imageUrl_'+imageUrlInputsCount);
    // now, we append a new input element with an incremented array key defined by the length of already existing input elements
    currentInput.append('<input type="file" name="imageURL['+imageUrlInputsCount+']" id="imageURL" multiple="" class="file" />');
    // and finally we hide the old element
    currentInput.hide();

    // 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);
}

现在确保在检索服务器代码（php / jsp / asp，node.js或您正在使用的任何代码）中更改了对imageURL的检查，您迭代imageURL，因为现在您有几组imageURL。即你的imageURL参数可能如下所示：

imageURL = array (
  0 => array(
    'foo1.pdf',
    'foo2.pdf',
    'foo3.pdf',
  ),
  1 => array(
    'foo4.pdf',
    'foo5.pdf',
    'foo6.pdf',
  )
  3 => array(
    'foo7.pdf',
    'foo8.pdf',
    'foo9.pdf',
  )
)

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

2 个答案: