5
Đang cố gắng tải lên tệp bằng cách sử dụng API của DnD và API tệp. Không chắc chắn làm thế nào để gửi dữ liệu mẫu đến máy chủ, tôi đã cố gắng gửi bằng cách sử dụng XMLHttpRequest nhưng không thành công. Đây là những gì tôi có cho đến nay.Tải tệp lên bằng cách sử dụng tính năng kéo và thả của HTML5 trong Asp.net
<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);
}
Tôi biết tôi có một nút trong UI, tính đến bây giờ không sử dụng. Nhưng như bạn có thể thấy tôi đang cố gắng gửi một yêu cầu bằng cách sử dụng XMLHttpRequest. Bất cứ ai có thể đề nghị tôi làm thế nào tôi có thể tiến xa hơn. Nhưng mã phía máy chủ của tôi không bao giờ được thực hiện không chắc chắn liệu XMLHttpRequest có thành công hay không.
Liên kết mà bạn cung cấp đã giúp tôi rất nhiều! Cảm ơn vì điều đó. Ngoài ra, bất kỳ cơ hội nào bạn đưa ra một cái gì đó về việc gửi các tập tin hình ảnh đã được sửa đổi (thay đổi kích thước) với thẻ , khi gửi? Tôi thực sự có câu hỏi tích cực về điều đó: $ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter