javascript 输入类型 FILE multiple - 按顺序添加文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28987896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input type FILE multiple - add files sequentially
提问by Jakub Kol?á?
I am developing a page (one-time use - its registration page) when a visitor opens dialog box and uploads files throught input type file multiple. All worked fine, but my client just told me they want to be able to upload multiple files from differentdirectories. By opening that dialog more times.
当访问者打开对话框并通过多个输入类型文件上传文件时，我正在开发一个页面（一次性使用 - 它的注册页面）。一切正常，但我的客户只是告诉我他们希望能够从不同目录上传多个文件。通过多次打开该对话框。
Now, normally what happens is that when I open file select dialog another time, the previously selected files got removed from the input.
现在，通常发生的情况是，当我再次打开文件选择对话框时，先前选择的文件已从输入中删除。
Is there any way (pure HTML or JS) that I could add the possibility to "stack" files - add them to the selection (maybe some JS object later converted back to input type file?) so that files can be added to the list of files in the input?
有什么方法（纯 HTML 或 JS）可以添加“堆叠”文件的可能性 - 将它们添加到选择中（也许一些 JS 对象后来转换回输入类型文件？）以便文件可以添加到列表中输入中的文件？
回答by Gregtheitroade D.
I would say that you have two options here.
我会说你在这里有两个选择。
Stick to classic form
坚持经典形式
If you want to keep the classic form logic, you will have to add more file inputs to keep your old selections. A short script will look like :
如果您想保留经典的表单逻辑，则必须添加更多文件输入以保留旧的选择。一个简短的脚本将如下所示：
$('input[type="file"]').on('change', function() { $(this).append('<input type="file" name="file[]"/>') });
So to add more files, the user can click on the next file input. You can then enhance it to make it nicer with design stuff and remove functionality.
所以要添加更多文件，用户可以单击下一个文件输入。然后，您可以增强它以使其更好的设计内容和删除功能。
The HTML5 way
HTML5 方式
While the previous idea is simple, I think it lacks of design and user friendliness. So the other idea is a more advance way, which will need a bit more of work but will let you do what you want and more (You could add drag/drop for instance).
虽然之前的想法很简单，但我认为它缺乏设计和用户友好性。所以另一个想法是一种更先进的方法，它需要更多的工作，但会让你做你想做的事情，更多（例如，你可以添加拖放）。
So the basic idea is that when the user select a file, you will get the file in Javascript, you can do it by using the FileReaderobject. When you have the file content, you can just queue it on a variable.
所以基本的想法是当用户选择一个文件时，你会在 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);
}
}
Note that If you want to keep the select dialog, you will need to keep the file input.
请注意，如果要保留选择对话框，则需要保留文件输入。
Once your user valid the form, you should send your other inputs first by Ajax (you want to stay on the page, or you'll have to store your files like in the localStorage which I think is a bad idea). Then you'll have to send your file to the server using Ajax requests as well, it's easy as just sending the file bits to the server. And on your server you will have to get those bits and simply put it on a file (If you have a specific language for the server part we can extend on how doing it).
一旦您的用户验证表单，您应该首先通过 Ajax 发送您的其他输入（您想留在页面上，或者您必须将文件存储在 localStorage 中，我认为这是一个坏主意）。然后，您还必须使用 Ajax 请求将文件发送到服务器，就像将文件位发送到服务器一样简单。在您的服务器上，您必须获取这些位并将其放在一个文件中（如果您有服务器部分的特定语言，我们可以扩展如何操作）。
You can go then further that way and have the possibility to get the progress of the upload, cancel an upload, slice your files if you have size limitation, do drag and drop,...
然后您可以更进一步，并有可能获得上传进度、取消上传、在有大小限制的情况下对文件进行切片、进行拖放、...
Of course, you will to considerate that some browsers have some issueswith this object, but it tend to be good everywhere.
回答by S. Roose
Note on the "classic form"/JQuery solution given by Gregtheitroade: this will not work on the newly added inputs, as the listener is not active on them. If you modify this to use delegated events you have a working clean solution:
请注意 Gregtheitroade 给出的“经典表单”/JQuery 解决方案：这不适用于新添加的输入，因为侦听器对它们不活动。如果您修改它以使用委托事件，您将拥有一个干净的解决方案：
<div id="files">
<input type="file" name="file[]" />
</div>
$("#files").on("change", "input", function(event){
$('#files').append('<input type="file" name="file[]"/>')
});
