Przesyłanie plików za pomocą przeciągania i upuszczania HTML5 w Asp.net
Próbuję przesłać plik przy użyciu interfejsu API DnD i pliku HTML5. Nie jestem pewien, jak wysłać dane formularza na serwer, próbowałem wysłać za pomocą XMLHttpRequest, ale nie udało się. To co mam do tej pory.
<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);
}
DO#:
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);
}
Wiem, że mam przycisk w interfejsie użytkownika, jak na razie nie używam. Ale jak widać próbuję wysłać żądanie za pomocą XMLHttpRequest. Czy ktoś może mi zasugerować, jak mogę iść dalej. Ale mój kod po stronie serwera nigdy nie został wykonany, nie jestem pewien, czy XMLHttpRequest powiodło się.