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

时间：2023-08-25

本文介绍了在 Asp.net 中使用 HTML5 的拖放上传文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 <body><form id="form1" runat="server" enctype="multipart/form-data"><br/><div id="drop_area">把文件放在这里</div><br/><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/></表格></身体><脚本>if (window.File && window.FileList && window.FileReader) {var dropZone = document.getElementById('drop_area');dropZone.addEventListener('dragover', handleDragOver, false);dropZone.addEventListener('drop', handleDnDFileSelect, false);}别的 {alert('对不起！此浏览器不支持 HTML5 文件 API.');}</脚本>var 文件；函数句柄拖动(事件){event.stopPropagation();event.preventDefault();var dropZone = document.getElementById('drop_zone');dropZone.innerHTML = "现在放下";}函数句柄DnDFileSelect(事件){event.stopPropagation();event.preventDefault();/* 读取所有选定文件的列表.*/文件 = event.dataTransfer.files;/* 合并输出元素.*/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");//错误的 ?不确定.xhr.setRequestHeader("内容类型", "multipart/form-data");xhr.send(数据);}

C#:

 HttpFileCollection fileCollection = Request.Files;for (int i = 0; i < fileCollection.Count; i++){HttpPostedFile 上传 = fileCollection[i];字符串文件名=c:\Test\"+upload.FileName;上传.另存为(文件名)；}

我知道我在 UI 中有一个按钮，目前我没有使用.但正如您所看到的，我正在尝试使用 XMLHttpRequest 发送请求.谁能建议我如何进一步进行.但是我的服务器端代码永远不会被执行我不确定 XMLHttpRequest 是否成功.

解决方案

Jeezzz!!它在 IE 中运行良好，几天以来我一直在 Chrome v 28 中进行测试.在 IE 文件中上传正常.(测试了多个文件上传).所以为了让它在 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

这篇关于在 Asp.net 中使用 HTML5 的拖放上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：在 C# 托盘中拖放 NotifyIcon 下一篇：在 WPF 中的网格中的单元格之间拖放自定义控件

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

问题描述

相关文章

最新文章