使用HTML5在Asp.net中拖放文件上传 [英] File upload using HTML5's drag and drop in Asp.net
问题描述
我试图使用HTML5的DnD和File API上传文件。我不知道如何将表单数据发送到服务器，我尝试使用XMLHttpRequest发送，但没有成功。这是我迄今为止所拥有的。
< body>
< form id =form1runat =serverenctype =multipart / form-data>
< br />
< div id =drop_area>在这里删除文件< / div> < br />
< asp：Button ID =Button1runat =serverOnClick =Button1_ClickText =Button/>
< / form>
< / body>
< script>
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（'抱歉！此浏览器不支持HTML5文件API。
}
< / script>
var files;
函数handleDragOver（event）{
event.stopPropagation（）;
event.preventDefault（）;
var dropZone = document.getElementById（'drop_zone'）;
dropZone.innerHTML =现在下载;
}
函数handleDnDFileSelect（event）{
event.stopPropagation（）;
event.preventDefault（）;
/ *读取所有选定文件的列表。 * /
files = event.dataTransfer.files;
/ *整合输出元素。 * /
var form = document.getElementById（'form1'）;
var data = new FormData（form）; （var i = 0; i< files.length; i ++）{
data.append（files [i] .name，files [i]）;
}
var xhr = XMLHttpRequest（）;
xhr.open（POST，Upload.aspx）; //错了？不确定。
xhr.setRequestHeader（Content-type，multipart / form-data）;
xhr.send（data）;
}
C＃：
HttpFileCollection fileCollection = Request.Files; （int i = 0; i< fileCollection.Count; i ++）
{
HttpPostedFile upload = fileCollection [i];
string filename =c：\\Test\\+ upload.FileName;
upload.SaveAs（filename）;
}
我知道我在用户界面中有一个按钮，目前还没有使用。但是，您可以看到我正在尝试使用XMLHttpRequest发送请求。任何人都可以建议我如何进一步。但是我的服务器端代码永远不会执行，不知道XMLHttpRequest是否成功。
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 ??） p>
-
评论赞赏。
链接到完整的代码： http：// programmingusingdotnet .blogspot.com / 2013/08 / aspnet-drag-and-drop-file-uploads-using.html
Am trying to upload a file using HTML5's DnD and File API. Am not to sure how to send form data to the server, i tried to send using XMLHttpRequest but was not successful. This what i have so far.
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<br />
<div id="drop_area">Drop files here</div> <br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/>
</form>
</body>
<script>
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.');
}
</script>
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);
}
I know i have a button in the UI, as of now am not using. But as you can see am trying to send a request using XMLHttpRequest. Can anyone suggest me how can i proceed further. But my server side code never get executed am not sure whether XMLHttpRequest was successful.
Jeezzz!! Its works fine in IE, i was testing in Chrome v 28 since few days. In IE file gets uploaded fine. (tested multiple file uploads). So to make it work in Chrome i had to make few changes. * Mistakes made
In chrome While debugging client-side i found that var xhr = XMLHttpRequest() throws an error, "dom object constructor cannot be called as a function" So replaced it with
var xhr=new XMLHttpRequest(); and removed xhr.setRequestHeader("Content-type", "multipart/form-data"); (Not sure why but xhr.send() results in ispostback value to be false?? )
Comments are appreciated. Link to full code: http://programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html
这篇关于使用HTML5在Asp.net中拖放文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
