输入类型FILE多个 - 按顺序添加文件 [英] Input type FILE multiple - add files sequentially

问题描述

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

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

有没有什么方法（纯HTML或JS）可以添加堆叠文件的可能性 - 将它们添加到选择中（也许某些JS对象后来转换回输入类型文件？），以便可以将文件添加到输入文件列表中？ 我会说你有两种选择。

坚持经典形式 如果您想保留经典的表单逻辑，您将不得不添加更多的文件输入以保留旧的选择。
简短的脚本将如下所示：

  $（'input [type =file]'）。on （'change'，function（）{$（this）.append（'< input type =filename =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}; 
}; $（i = 0; i< j; i + = 1）{
 file = files [i]; 
 
; 
 reader.readAsBinaryString（file）; 
 
 
 
 
 $ b $ p 
 $ b 
请注意，如果您想保留选择对话框，您需要保留文件输入。
 
 
 
一旦您的用户验证了表单，您应该首先通过Ajax发送其他输入（您希望保留在页面上，或者你必须存储你的文件，如localStorage，我认为这是一个坏主意）。 
然后，您必须使用Ajax请求将文件发送到服务器，这很简单，只需将文件位发送到服务器即可。在你的服务器上，你必须得到这些位，并把它放在一个文件中（如果你有一个服务器部分的特定语言，我们可以扩展它的方式）。
 
 
 
您可以继续这样做，并有可能获得上传进度，取消上传，如果您的文件大小受限，请切片文件，拖放操作，... 
 
 
 
当然，您可以考虑某些浏览器存在一些问题与这个对象，但它往往是无处不在。
 
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 different directories. 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?
解决方案
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

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 FileReader object. 
When you have the file content, you can just queue it on a variable.
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).

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 issues with this object, but it tend to be good everywhere.

                        
这篇关于输入类型FILE多个 - 按顺序添加文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！