JavaScript で FormData を使用して、画像を含むフォームを非同期に投稿しようとしています。MDN ドキュメントを参照として使用しています。具体的には、次の部分:ファイルのアップロード プロセスを非同期的に処理します。
ドラッグ アンド ドロップの代わりに、通常のフォーム送信のようなボタンを使用しようとしています。私が見ている問題は、最初の送信時にサーバーにヒットしないことです。firebugには意味のあるメッセージが表示されません。同じ画像を使用しようとしたり、すぐに再送信したりすると、サーバーにヒットしました。もう一度写真を変更した瞬間、サーバーにヒットしません。
これが私のhtml/javascriptです。
<form action="#">
<input id="image-one-upload" type="file" name="Image" />
<img id="img-one-prev" class="preview" src="#" />
<label for="image-one-caption">Caption</label>
<input id="image-one-caption" type="text" name="Caption" />
<button id="upload-btn">Save</button>
</form>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
function sendFile(file) {
var uri = "SaveImage";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('Image', file);
fd.append('Caption', "caption"); // testing post of additional form data
// Initiate a multipart/form-data upload
xhr.send(fd);
};
$(document).on('change', "#image-one-upload", function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#img-one-prev").attr('src', e.target.result);
};
reader.readAsDataURL(this.files[0]);
}
});
$(document).on('click', "#upload-btn", function () {
sendFile($("#image-one-upload")[0].files[0]);
});
});
</script>
詳しくは
以下は、最初に失敗した投稿と、次に成功した投稿のスクリーンショットです。ヘッダーに関係しているように見えますが、何が起こっているのか、なぜ起こっているのかわかりません。
悪い投稿
グッドポスト
考え?