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这个对象，但它到处都是好的。

Answer 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[]"/>')
});

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

2 个答案: