5
HTML5のDnDおよびFile APIを使用してファイルをアップロードしようとしています。私はXMLHttpRequestを使用して送信しようとしましたが、フォームデータをサーバーに送信する方法がわかりませんが、成功しませんでした。これは私がこれまで持っているものです。Asp.netでHTML5のドラッグアンドドロップを使用したファイルアップロード
<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);
}
私が使用していない今のところ私は、UIのボタンを持って知っています。しかし、XMLHttpRequestを使用してリクエストを送信しようとしています。誰かが私にどのように進めることができるかを提案することができます。しかし、私のサーバーサイドコードは決して実行されませんXMLHttpRequestが成功したかどうかは分かりません。
あなたが提供したリンクが私を助けました！ありがとうございました。また、送信時にタグを使用してイメージファイルを変更（実際にサイズ変更したもの）して送信することについて何か考えてもらえますか？ 私は実際にそれについて積極的な質問をしています：$ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter