列出从文件输入中选择的文件 [英] List selected files from file input

问题描述

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

 
<span>上传</span><input type="file" name="imageURL[]" id="imageURL" multiple="" class="file"/>
<div id="文件列表">

我有这个代码

(函数(){var filesUpload = document.getElementById("imageURL"),zfileList = document.getElementById("文件列表");函数上传文件(文件){var li = document.createElement("li"),div = document.createElement("div"),读者，xhr,文件信息；li.appendChild(div);//显示文件信息并将其附加到文件列表中fileInfo = "<div class=\"neutral\">文件:<strong>"+ file.name + "</strong> 与大小 <strong>"+ parseInt(file.size/1024, 10) + "</strong> kb 在队列中.</div>";div.innerHTML = 文件信息；fileList.appendChild(div);}函数 traverseFiles(文件){如果(文件类型！==未定义"){for (var i=0, l=files.length; i

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

<小时>

简化:当用户选择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);//将初始文件添加到列表create_new_input();}函数 create_new_input() {var new_input = $('<input type="file"/>');//创建文件选择器new_input.on("change", function() {traverseFiles($(this).get(0).files);});//$('body').append(new_input);//将此输入添加到您的页面}， 错误的);

您必须将在 traverseFiles 中收到的所有文件添加到 xhr.此示例使用 jQuery，我建议您一直使用它！

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

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

祝你好运！

I want to list selected file from file input.

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

I have this code

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


     })();

But the problem is when the user selects another files it is added to the list but the old files is not uploaded when the form is submitted.

---

Simplified: when the user selects file1.pdf and file2.pdf The list shows file1.pdf and file2.pdf When he selects again another files file3.pdf and file4.pdf the list shows file1.pdf , file2.pdf, file3.pdf and file4.pdf But when he submit the form only file3.pdf and file4.pdf is uploaded

My question is how to remove the files which will not be uploaded from the list. OR a way to upload all the files in the list. Thanks in advance.

解决方案

What is happening is that the input is emptied when selecting more files, hence not uploading the previously displayed files.

SOLUTION 1: To combat this you could create a new input in the change event handler, although this could get quite messy. You would have to get all files from all the inputs on upload. You have not shown your actual upload code, so I cannot give an example in context:

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

You will have to add all files that you receive in the traverseFilesto the xhr. This example uses jQuery, and I would recommend that you use it all the time!

SOLUTION 2: Other wise you can empty the file list box on input changed:

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

Good luck!

这篇关于列出从文件输入中选择的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！