我试图在ASP.NET MVC中实现Gmail风格的拖放文件上传。
我一直在关注这篇文章:http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html,并希望将上传的文件发布到MVC控制器操作。
为此,我修改了链接中的示例JavaScript脚本以指向我的控制器操作:
xhr.open("post","/home/UploadFiles",true);
这是我的控制器动作:
[HttpPost] public virtual string UploadFiles(object obj) { var length = Request.ContentLength; var bytes = new byte[length]; Request.InputStream.Read(bytes,length); // var bytes has byte content here. what do do next? return "Files uploaded!"; }
我设置一个断点,当我上传一个文件时,断点会被打 – 这是很好的。但是如何从上传的(JavaScript)XMLHttpRequest对象中提取数据?我不认为它在HttpRequest中 – 是参数吗?如果是这样,我期望什么类型的如何提取字节数组并从中提取上传的文件信息?
(我正在使用Chrome – 我知道它在IE中不起作用)
任何建议将不胜感激!
解决方法
弄清楚了。这是C#代码:
[HttpPost] public virtual string UploadFiles(object obj) { var length = Request.ContentLength; var bytes = new byte[length]; Request.InputStream.Read(bytes,length); // bytes has byte content here. what do do next? var fileName = Request.Headers["X-File-Name"]; var fileSize = Request.Headers["X-File-Size"]; var fileType = Request.Headers["X-File-Type"]; var saveToFileLoc = string.Format("{0}\\{1}",Server.MapPath("/Files"),fileName); // save the file. var fileStream = new FileStream(saveToFileLoc,FileMode.Create,FileAccess.ReadWrite); fileStream.Write(bytes,length); fileStream.Close(); return string.Format("{0} bytes uploaded",bytes.Length); }
这里是Javascript代码:
<script type="text/javascript"> (function () { var filesUpload = document.getElementById("files-upload"); var dropArea = document.getElementById("drop-area"); var fileList = document.getElementById("file-list"); function uploadFile(file) { var li = document.createElement("li"); var progressBarContainer = document.createElement("div"); var progressBar = document.createElement("div"); progressBarContainer.className = "progress-bar-container"; progressBar.className = "progress-bar"; progressBarContainer.appendChild(progressBar); li.appendChild(progressBarContainer); // Uploading - for Firefox,Google Chrome and Safari var xhr = new XMLHttpRequest(); // Update progress bar xhr.upload.addEventListener("progress",function (evt) { if (evt.lengthComputable) { progressBar.style.width = (evt.loaded / evt.total) * 100 + "%"; } },false); // File uploaded xhr.addEventListener("load",function () { progressBarContainer.className += " uploaded"; progressBar.innerHTML = "Uploaded!"; },false); xhr.open("post","/home/UploadFile",true); // Set appropriate headers xhr.setRequestHeader("Content-Type","multipart/form-data"); xhr.setRequestHeader("X-File-Name",file.fileName); xhr.setRequestHeader("X-File-Size",file.fileSize); xhr.setRequestHeader("X-File-Type",file.type); // Send the file xhr.send(file); // Present file info and append it to the list of files var div = document.createElement("div"); li.appendChild(div); var fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>"; fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024,10) + " kb</div>"; fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>"; div.innerHTML = fileInfo; // insert at beginning of list. fileList.insertBefore(li,fileList.firstChild); // or insert at end of list. //fileList.appendChild(li); } function traverseFiles(files) { if (typeof files !== "undefined") { for (var i = 0,l = files.length; i < l; i++) { uploadFile(files[i]); } } else { fileList.innerHTML = "No support for the File API in this web browser"; } } filesUpload.addEventListener("change",function () { traverseFiles(this.files); },false); dropArea.addEventListener("dragleave",function (evt) { var target = evt.target; if (target && target === dropArea) { this.className = ""; } evt.preventDefault(); evt.stopPropagation(); },false); dropArea.addEventListener("dragenter",function (evt) { this.className = "over"; evt.preventDefault(); evt.stopPropagation(); },false); dropArea.addEventListener("dragover",function (evt) { evt.preventDefault(); evt.stopPropagation(); },false); dropArea.addEventListener("drop",function (evt) { //document.getElementById("file-list").innerHTML = ""; traverseFiles(evt.dataTransfer.files); this.className = ""; evt.preventDefault(); evt.stopPropagation(); },false); })();