初始FormData帖子失败

Question

我试图在javascript中使用FormData异步发布包含图像的表单。我使用MDN documentation作为参考;特别是Handling the upload process for a file, asynchronously下的部分。

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

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

更多信息

下面是第一篇失败帖子的截图，然后是第二篇成功的帖子。它看起来与标题有关，我只是不知道它发生了什么或为什么会发生。

坏帖子

好帖子

思想？