Question

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

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

<input type = "file" multiple>

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

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

$('.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.
}
});

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

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

Answer 1

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

Answer 2

您可以尝试遍历所选文件，然后使用包含来自文件的数据的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.
   }
}
});

Answer 3

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

感谢响应者的快速反应。

将HTML文件对象从一个<input type =“file”/>传递给另一个

3 个答案: