File API File Upload-Read XMLHttpRequest in ASP.NET MVC
Próbuję zaimplementować Gmail style drag-and-drop file upload w ASP.NET MVC.
Śledziłem ten artykuł: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html {[6] } i chcesz opublikować przesłane pliki do akcji kontrolera MVC.
Aby to zrobić, zmodyfikowałem przykładowy skrypt JavaScript w linku, aby wskazywał na moją akcję kontrolera:
xhr.open("post", "/home/UploadFiles", true);
Oto moja akcja kontrolera:
[HttpPost]
public virtual string UploadFiles(object obj)
{
var length = Request.ContentLength;
var bytes = new byte[length];
Request.InputStream.Read(bytes, 0, length);
// var bytes has byte content here. what do do next?
return "Files uploaded!";
}
Ustawiam punkt przerwania i kiedy wgrywam plik, breakpoint zostaje trafiony - co jest dobre. Ale jak wyodrębnić dane z przesłanego (javascript) obiektu XMLHttpRequest? Nie sądzę, że jest w HttpRequest - czy jest to parametr ? Jeśli tak, jakiego typu należy się spodziewać i jak wyodrębnić tablicę bajtów i wyodrębnić z niej przesłane informacje o pliku?
(używam Chrome-wiem, że nie działa w IE)
Wszelkie sugestie będą mile widziane!2 answers
Rozgryzłem to. Oto kod C#:
[HttpPost]
public virtual string UploadFiles(object obj)
{
var length = Request.ContentLength;
var bytes = new byte[length];
Request.InputStream.Read(bytes, 0, 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, 0, length);
fileStream.Close();
return string.Format("{0} bytes uploaded", bytes.Length);
}
A oto kod 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);
})();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-31 19:06:22
To jest świetne. Poprawione nieco:
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-04 05:07:38