0

我有一个网页，它有一个上传框并上传一张图片。jquery 如下。用户浏览一个文件并单击一个名为 btn_AddImage 的按钮，该文件被上传。问题是代码仅在我在 firebug 中的“if (xhr.readyState == 4)”上放置断点并显示“btn_ShowImage”元素时才有效。如果我不设置断点，文件将被上传，但页面仍会提示错误，并且“btn_ShowImage”元素仍将被隐藏。

$(document).ready(function () {
    $('#btn_AddImage').live('click', AjaxFileUpload);
});
function AjaxFileUpload() {
    var fileInput = document.getElementById("image_Upload");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'ImageFileUploader.ashx');
    xhr.send(fd);
    if (xhr.readyState == 4) {
        $('#btn_ShowImage').show();
    }
    else {
        alert('error');
    }
}

感谢您的回复。我已经更正了我的代码并且它正在工作。更正后的代码如下

$(document).ready(function () {
    $('#btn_AddImage').live('click', AjaxFileUpload);

});

function AjaxFileUpload() {
    var fileInput = document.getElementById("image_Upload");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'ImageFileUploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             $('#btn_ShowImage').show();
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}
4

1 回答 1

3

“AJAX”中的“A”代表“异步”:)

含义：您正在设置 XHR 对象并同步检查其“readyState”属性——甚至在 ajax 调用真正结束之前。您应该设置并触发 AJAX 请求并监听“readyStateChange”事件——这可能会被多次调用，直到请求完全完成。

立即想到的另一个问题：您正在使用 jQuery 进行按钮上的事件绑定 - 为什么您自己摆弄 XHR 而不仅仅是也将 jQuery 用于 AJAX？

于 2013-07-08T09:31:25.080 回答