0

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>

詳しくは

以下は、最初に失敗した投稿と、次に成功した投稿のスクリーンショットです。ヘッダーに関係しているように見えますが、何が起こっているのか、なぜ起こっているのかわかりません。

悪い投稿 悪い投稿

グッドポスト ここに画像の説明を入力

考え?

4

0 に答える 0