使用html5 multiple属性来触发多个单个上传 [英] use html5 multiple attribute to trigger multiple single uploads

问题描述

抱歉令人困惑的标题。

我有一个form-- form1有一个文件输入（设置了多个属性，以便用户可以选择多个文件）。表单没有提交。

I have a form-- form1 that has one file input ( with multiple attribute set so that user can select mutiple files). The form doesn't get submitted.

我有另一个表单 - form2有一个文件输入。没有多属性。

I have another form -- form2 that has a single file input . no mutiple attribute.

现在通过javascript我想从上一个表单中的fileinput获取每个文件，然后将文件分配给form2的输入字段，然后执行ajax提交。
一旦ajax提交完成，我想对第二个文件和第三个文件执行相同操作等等。

Now via javascript i would like to fetch each files from the fileinput from the previous form and then assign the file to the form2's input field and then do an ajax submit. Once the ajax submit is complete I would like to do the same to 2nd file and then 3rd file and so on.

我不想使用flash或java applet。
我完全清楚IE不支持多个属性
opera可以使用无效的min max属性来做同样的事情。

I don't want to use flash or java applet. I am fully aware that IE doesn't support multiple attribute opera can use invalid min max attribute to do the same.

我的基本问题将是如何从form1输入字段中获取文件，然后将其分配给form2的字段..

My basic question would be how to fetch the files from the form1 input field and then assisgn it to form2's field ..

是否有解决方案？
或我的方法本身是不正确的？

Is there a solution for this ? or is my approach itself incorrect ?

我想在UI端实现什么？
文件上传，服务器进行一些处理并返回一些数据。
所以我想要的是用户可以选择10个文件，但是一上传第一个文件就会收到输出。

What I want to achieve on UI side ? The file gets uploaded and server does some processing and returns some data. so what I want is user can select 10 files but as soon as 1st file is uploaded the output is received.

推荐答案

第一：我的想法是错的。
我们无法通过javascript将值分配给type = file的输入。

First : My idea is wrong. We cannot assign a value via javascript to the input with type = file .

我想到了使用XMLHttpRequest的另一个想法。
这是我的代码：

I thought of another idea using the XMLHttpRequest. here is my code :

<form id="new_picture_form" method="post" enctype="multipart/form-data" action="some url" accept-charset="UTF-8">
<input id="original_input" class="file_hidden" type="file" onchange="handleFiles(this.files);" name="picture[image][]" multiple="multiple">
</form>
<form id="fileinfo" method="post" enctype="multipart/form-data" action="some url">
</form>

<script type="text/javascript">
  function handleFiles(files)
  { 

    for (var i = 0; i < files.length; i++) {
   FileUpload(files[i])
  }
  }

  function FileUpload(file) {

var data = new FormData(document.getElementById("fileinfo"));
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;


data.append('some field',"that you want to pass as param ")
data.append('type',"picture")
data.append("picture[image]", file);
  xhr.open("POST", "URL",true);
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {

  eval(xhr.responseText) // basically the result from server contains some script
    }
  }


}


</script>

这篇关于使用html5 multiple属性来触发多个单个上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！