Hochladen von Dateien mit HTML5 per Drag & Drop in Asp.net
Ich versuche, eine Datei mithilfe der DnD- und Datei-API von HTML5 hochzuladen. Ich bin nicht sicher, wie ich Formulardaten an den Server senden soll. Ich habe versucht, mit XMLHttpRequest zu senden, war aber nicht erfolgreich. Das was ich bisher habe.
<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);
}
Ich weiß, dass ich eine Schaltfläche in der Benutzeroberfläche habe, die ich derzeit nicht benutze. Aber wie Sie sehen, versuche ich, eine Anfrage mit XMLHttpRequest zu senden. Kann mir jemand vorschlagen, wie ich weiter vorgehen kann. Aber mein serverseitiger Code wird nie ausgeführt. Ich bin nicht sicher, ob XMLHttpRequest erfolgreich war.