使用HTML5在Asp.net中拖放来上传文件

我试图使用HTML5的DnD和File API上传文件。 我不确定如何将表单数据发送到服务器，我尝试使用XMLHttpRequest发送，但没有成功。 这就是我到目前为止所拥有的。

 
 
 
Drop files here
 
  
   if (window.File && window.FileList && window.FileReader) { var dropZone = document.getElementById('drop_area'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleDnDFileSelect, false); } else { alert('Sorry! this browser does not support HTML5 File APIs.'); }  var files; function handleDragOver(event) { event.stopPropagation(); event.preventDefault(); var dropZone = document.getElementById('drop_zone'); dropZone.innerHTML = "Drop now"; } function handleDnDFileSelect(event) { event.stopPropagation(); event.preventDefault(); /* Read the list of all the selected files. */ files = event.dataTransfer.files; /* Consolidate the output element. */ var form = document.getElementById('form1'); var data = new FormData(form); for (var i = 0; i < files.length; i++) { data.append(files[i].name, files[i]); } var xhr = XMLHttpRequest(); xhr.open("POST", "Upload.aspx"); //Wrong ? not sure. xhr.setRequestHeader("Content-type", "multipart/form-data"); xhr.send(data); } 

C＃：

  HttpFileCollection fileCollection = Request.Files; for (int i = 0; i < fileCollection.Count; i++) { HttpPostedFile upload = fileCollection[i]; string filename ="c:\\Test\\" + upload.FileName; upload.SaveAs(filename); } 

我知道UI中有一个按钮，截至目前我还没有使用。 但正如您可以看到我尝试使用XMLHttpRequest发送请求。 任何人都可以建议我如何进一步。 但我的服务器端代码永远不会被执行，我不确定XMLHttpRequest是否成功。

Answer 1

Jeezzz！ 它在IE中运行良好，我几天都在Chrome v 28中进行测试。 在IE文件中上传得很好。 （测试多个文件上传）。 因此，要使其在Chrome中运行，我必须进行一些更改。 *犯了错误

• 在chrome中调试客户端我发现var xhr = XMLHttpRequest（）抛出一个错误，“ dom对象构造函数不能被调用为函数 ”所以用它替换它

  var xhr = new XMLHttpRequest（）; 并删除了xhr.setRequestHeader（“Content-type”，“multipart / form-data”）; （不知道为什么但xhr.send（）会导致ispostback值为false ??）

• 评论表示赞赏。 链接到完整代码： http ： //programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html