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

Question

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

din*_*din 5 c# asp.net html5 drag-and-drop file-upload

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

    <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);                
            }

Run Code Online (Sandbox Code Playgroud)

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);
                }

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

din*_*din 6

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

归档时间：	12 年前
查看次数：	15260 次
最近记录：	9 年，1 月前