我试图在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);
})();
