javascript - Input type FILE multiple - 按顺序添加文件

Question

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

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

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

Answer 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有了这个对象，但它往往在任何地方都很好。