将HTML文件对象从一个传递给另一个

I want to implement a multiple file uploader in a form wherein I want the files so that the user may sort the priority of the files (I am using draggable and sortable Jquery tool).

我想以一种形式实现一个多文件上传器，其中我想要文件，以便用户可以对文件的优先级进行排序（我使用的是可拖动和可排序的Jquery工具）。

Therefore I have added a multiple file input as:

因此我添加了一个多文件输入：

<input type = "file" multiple>

Now when I select some files, it shows say 3 files selected. But when I select 3 files, I wish to split the file uploader in 3 parts so that the user may set the priority ordering accordingly.

现在，当我选择一些文件时，它显示选择了3个文件。但是当我选择3个文件时，我希望将文件上传器拆分为3个部分，以便用户可以相应地设置优先级顺序。

For that I have used the following kind of code:

为此，我使用了以下类型的代码：

$('.files').change(function(e){
var filesSelected = e.target.files;
if(filesSelected.length > 1){ //if user selects multiple files, then automatically split the files into multiple divs so that he/she may do the ordering of files
    //Here I want to create a list of  all the files and implement the draggable and sortable thing.
}
});

The situation is, that I am not able to split the array of objects of FileList and assign each object to another input.

情况是，我无法拆分FileList的对象数组并将每个对象分配给另一个输入。

Hope I am clear in my doubt and the question is understandable, as it is the first time I am posting in any such forum.

希望我明白我的疑问，这个问题是可以理解的，因为这是我第一次在任何这样的论坛上发帖。

3 个解决方案

#1

You can try to iterate through the selected files and then create a div dynamically with jquery that contains the data from the file like this

您可以尝试遍历所选文件，然后使用jquery动态创建div，其中包含来自文件的数据，如下所示

$('.files').change(function(e){
var filesSelected = e.target.files;
if(filesSelected.length > 1){ 
   for(var i=0;i<filesSelected.length;i++) { // We iterate through the selected Files
      $("#idFromParentElement").append('<div> id=File'+i+'</div'); // Then we create and append the new div to the parent element of our choice
      var fileId = 'File'+i;
      $("#fileId").data("file",filesSelected[i]); //After that we include a data into the div with the selected file.
   }
}
});

#2

You cannot set value for <input type="file"> programmatically. It would be a major security flow. Imagine some website automatically uploading arbitrary files from your computer.

您无法以编程方式为设置值。这将是一个重要的安全流程。想象一下，某些网站会自动从您的计算机上传任意文件。

#3

From the posts I received and the brief discussions, it is evident that setting file values programmatically will pose security threat and so is not a good option. As far as solving my issue is concerned, best would be to find a way to create multiple divs/fields containing the filenames of the files that are being uploaded and then applying the drag/drop/sort feature in that set of divs. This way the user can easily prioritize the files and while saving the form the array/field containing the priority shall be considered before saving the files data in the database.

从我收到的帖子和简短的讨论中可以看出，以编程方式设置文件值会带来安全威胁，因此不是一个好的选择。就解决我的问题而言，最好的方法是找到一种方法来创建包含正在上载的文件的文件名的多个div / fields，然后在该组div中应用拖放/排序功能。这样，用户可以轻松地对文件进行优先级排序，在保存表单时，在将文件数据保存到数据库之前，应考虑包含优先级的数组/字段。

Thanks to the responders for their quick response.

感谢响应者的快速反应。

#1