输入类型 FILE multiple - 按顺序添加文件答案

【问题标题】：Input type FILE multiple - add files sequentially输入类型 FILE multiple - 按顺序添加文件
【发布时间】：2015-03-11 13:28:48
【问题描述】：

当访问者打开对话框并通过多个输入类型文件上传文件时，我正在开发一个页面（一次性使用 - 它的注册页面）。一切正常，但我的客户只是告诉我他们希望能够从不同目录上传多个文件。通过多次打开该对话框。

现在，通常情况是，当我再次打开文件选择对话框时，之前选择的文件会从输入中删除。

有什么方法（纯 HTML 或 JS）可以添加到“堆栈”文件的可能性 - 将它们添加到选择中（可能某些 JS 对象稍后转换回输入类型文件？）以便可以添加文件到输入中的文件列表？

【问题讨论】：

允许他们在同一个选择中选择多个，只需包含多个属性 w3schools.com/tags/att_input_multiple.asp ，如果您希望最后一个选择说，只需听单击并保存选择的内容。可能需要查看代码以提供更多帮助。
Abraham 我已经设置了“多个”选项。客户希望能够从不同的目录中选择更多文件，这只能通过多次打开该对话框来完成。但是，它每次都会被删除。我只是不想使用 ajax 或其他东西来制作它，因为在发送表单时所有内容都会被保存 - 表单上有许多其他字段，每次添加文件时都无法发送它。是的，我需要做出最后的选择。

标签： javascript jquery html input

【解决方案1】：

我会说你有两个选择。

坚持经典形式

如果您想保留经典的表单逻辑，则必须添加更多文件输入以保留您的旧选择。一个简短的脚本如下所示：

$('input[type="file"]').on('change', function() { $(this).append('<input type="file" name="file[]"/>') });

所以要添加更多文件，用户可以点击下一个文件输入。然后，您可以对其进行增强，使其在设计方面更好，并删除功能。

HTML5 方式

虽然之前的想法很简单，但我认为它缺乏设计和用户友好性。所以另一个想法是一种更先进的方法，它需要更多的工作，但可以让你做你想做的事情和更多（例如，你可以添加拖放）。

所以基本思想是当用户选择一个文件时，你会在Javascript中得到文件，你可以使用FileReader对象来做到这一点。当你有了文件内容后，你可以把它放在一个变量上。

var queue = [];

function addFile(event) {
    var files = event.target.files, i = 0, j = files.length, file, reader;

    reader = new FileReader();
    reader.onloadend = function () {
        queue.push{ reader.result };
    };

    for (i = 0; i < j; i += 1) {
        file = files[i];
        reader.readAsBinaryString(file);
    }
}

请注意，如果要保留选择对话框，则需要保留文件输入。

一旦您的用户验证了表单，您应该首先通过 Ajax 发送您的其他输入（您希望留在页面上，或者您必须将文件存储在 localStorage 中，我认为这是一个坏主意）。然后，您还必须使用 Ajax 请求将文件发送到服务器，这很容易，只需将文件位发送到服务器。在您的服务器上，您必须获取这些位并简单地将其放在一个文件中（如果您有服务器部分的特定语言，我们可以扩展它的操作方式）。

您可以走得更远，并有可能获得上传进度、取消上传、如果您有大小限制、对文件进行切片、拖放，...

当然，你会考虑some browsers have some issues这个对象，但它往往在任何地方都很好。

【讨论】：

【解决方案2】：

请注意 Gregoire 给出的“经典形式”/JQuery 解决方案：这不适用于新添加的输入，因为侦听器在它们上不活动。如果您将其修改为使用委托事件，则您有一个有效的干净解决方案：

<div id="files">
    <input type="file" name="file[]" />
</div>

$("#files").on("change", "input", function(event){
    $('#files').append('<input type="file" name="file[]"/>')
});

【讨论】：