0

我正在尝试使用 javascript 中的 FormData 异步发布包含图像的表单。我使用MDN 文档作为参考；特别是以下部分：处理文件的上传过程，异步。

我尝试使用像普通表单提交一样的按钮，而不是拖放。我看到的问题是，在第一次提交时，我没有访问服务器；并且萤火虫中没有显示任何有意义的消息。如果我尝试使用相同的图片，或者只是立即重新提交，我就会成功访问服务器。我再次更改图片的那一刻，它无法访问服务器。

这是我的 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