将多个图像（文件）从一个文件输入分配到另一个文件输入 - 上传 [英] Assign multiple images (files) from one file input to another file input(s) - upload

问题描述

当我从对话框中选择要上传的每个文件时，我已经成功上传了使用AJAX的代码。所以每个上传都有自己的表单和输入文件（上传按钮），如下所示。当前代码依次上传文件，因为用户可以选择多张照片，但不能一起&我使用Javascript中的setTimeout排队算法来检查第一个上传是否完成，以开始第二个上传，第三个等等。

 < form id =form1> 
< input type =fileid =userfile1name =userfile []multiple /> 
< / form> 
 
< form id =form2> 
< input type =fileid =userfile2name =userfile []multiple /> 
< / form> 
。 
。 
。 
  

现在的问题是，当我选择要上传的多个图像时（比方说两个图像一起使用Ctrl）使用第一个输入文件，我得到他们这个数组：

现在，我如何将第二个图像分配给第二个输入文件

  userfile2 
  

我想像以前一样继续上传？这不是和我一起工作，我读了更新输入文件有安全问题，但我需要分配用户选择，而不是路径。

我不想在AJAX中使用FromData，因为这会导致我所有的代码都改变，并且与我的代码不兼容。 p>

非常感谢您的帮助！

解决方案

使用 javascript 将文件对象分配给 input type =file c $ c>。用户应该选择 File 对象。可以从> FileList 中选择一个或多个 File 对象， / code> 文件选择并将所选文件作为单独的进程发送到服务器



 < input name =filestype =fileaccept =image / *multiple =true/>  

现在的问题是，当我选择多个图像时，使用第一个输入文件，我得到
他们在这个数组中

$ b上传（让我们说
两个图像一起使用Ctrl） $ b

请注意， FileList 被选中的多个文件返回的对象不是 Array 。

另请参阅输入文件到数组javascript / jquery ，触发点击输入=文件上的异步ajax done（），模拟放置文件事件

I have successful upload code that works perfect using the AJAX when I select each file to upload from the dialog. So each upload has its own form and input file (button to upload) as seen below. The current code uploads files sequentially as the user can select more than one photo but not together & I use queuing algorithm with setTimeout in Javascript to check if the first upload finishes to start the second upload, third, and so on.

<form id="form1">
    <input type="file" id="userfile1" name="userfile[]" multiple/>
</form>

<form id="form2">
    <input type="file" id="userfile2" name="userfile[]" multiple/>
</form>
.
.
.

The problem now, when I select multiple images to upload (let's say two images together using Ctrl), using the first input file, I get them in this array:

document.getElementById('userfile1').files; 

So now, how can I assign the second image selected to the second input file

userfile2

Because I want to resume the upload as before? It is not working with me and I read that there is security concerns to update the input file, but I need to assign what the user selected, not a path.

I don't want to use the FromData with AJAX as that will lead to change all my code and also it is not compatible with all browsers like my code.

Thanks a lot for your help!

解决方案

It is not possible to assign a File object to an input type="file" element using javascript . File object should be selected by user. It is possible to select a single or mutiple File objects from a FileList returned from multiple File selection and send that selected file to server as a separate process

document.querySelector("input[name=files]")
  .addEventListener("change", function(event) {
    var files = Array.prototype.slice.call(event.target.files),
      filtered = [];
    for (var i = 0; i < files.length; i++) {
      if (i > 0) filtered.push(files[i])
    };
    if (filtered.length) {
      console.log(files, filtered);
      filtered.forEach(function(file) {
        // do stuff
      })
    }
  })

<input name="files" type="file" accept="image/*" multiple="true" />

---

The problem now, when I select multiple images to upload (let's say two images together using Ctrl), using the first input file, I get them in this array

Note, the FileList object returned by multiple files being selected is not an Array .

See also input file to array javascript/jquery , Trigger click on input=file on asynchronous ajax done() , Simulate drop file event

这篇关于将多个图像（文件）从一个文件输入分配到另一个文件输入 - 上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！