Question

对于令人困惑的标题感到抱歉。

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

我有另一种形式 - form2，它有一个文件输入。没有多重属性。

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

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

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

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

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

Answer 1

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

的输入

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

<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属性来触发多个单个上传

1 个答案: