Question

我正在尝试使用HTML5的多重上传属性来上传文件。我知道它不适用于IE并且可以回退到单个文件上传。我也发现了一些无效的html标签，比如min max允许opera也这样做。

我正在尝试执行以下操作：浏览按钮能够选择多个文件。但是ajax应该逐个发送文件。我的场景是这样的：用户选择5个文件并开始上传。现在ajax应该firstfile发送第一个文件，然后是第二个，依此类推。服务器端脚本对文件执行某些操作并返回一些数据。现在，一旦完成一个文件上传，它必须呈现结果的那一部分。因此，当用户选择图像并开始上传时，每个文件上传后都会显示结果（而不是在上传所有文件之后）。

我试过这样的事情：

 function handleFiles(files)
  { alert(files.length); //properly returns the number of files selected
    for (var i = 0; i < files.length; i++) {
  new FileUpload(files[i])
  }
  }

  function FileUpload(file) {
  var reader = new FileReader();

  var xhr = new XMLHttpRequest();
  this.xhr = xhr;

  xhr.open("POST", "portfolio/add_media");
  reader.onload = function(evt) {
    xhr.sendAsBinary(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

在mozilla阅读教程后，我最终找到了缺失的参数。

。有人可以建议我一个干净的解决方案

更多细节：当我传递单个文件（没有多个属性）时，我的服务器收到：

“image”=＆gt; [＃＆lt; ActionDispatch :: HTTP :: UploadedFile的：0x10d55be8 @tempfile =＃＆LT;文件：C：/用户/拉夫/应用程序数据/本地/温度/ RackMultipart20110701-1916-2ly4k2-0＆gt;中 @头=“内容处置：形式数据;名= \ “图片[图像] [] \”; 文件名= \ “Desert.jpg \” \ r \ nContent型：图像/ JPEG \ r \ n”个， @ CONTENT_TYPE = “图像/ JPEG”， @ original_filename = “Desert.jpg” ＆GT;]}}

但是当我使用多个属性并使用xhr发送时，我只能获得一个文件参数。如何获得其余的参数？特别是行动调度东西

Answer 1

您只是将文件数据发送到服务器，而不以任何方式对其进行编码。要让服务器知道如何处理它，您需要正确编码数据（multipart/form-data编码）。最简单的方法是使用FormData对象：https://developer.mozilla.org/En/Using_XMLHttpRequest#Sending_files_using_a_FormData_object。只有data.append("CustomField", "This is some extra data")而不是data.append("file1", event.target.result)才会写{{1}}。

html5多次上传以及ajax

1 个答案: