输入类型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请求将文件发送到服务器,只需将文件位发送到服务器即可.在您的服务器上,您将不得不获取这些位并将其简单地放在一个文件上(如果您有一个特定的服务器部分语言,我们可以扩展它的工作方式).

你可以进一步这样做,有可能获得上传的进度,取消上传,如果你有大小限制切片你的文件,拖放,...

当然,你会考虑到某些浏览器对这个对象有一些问题,但它往往在各处都很好.

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