Question

我有一个有上传框并上传图片的网页。 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);
}

Answer 1

“AJAX”中的“A”代表“异步”：）

含义：您正在设置XHR对象并同步检查其“readyState”属性 - 即使在ajax调用确实之前也是如此。您应该设置并触发AJAX请求并侦听“readyStateChange”事件 - 这可能会被多次调用，直到请求完全完成。

立刻浮现在脑海中的另一个问题是：你在按钮上使用jQuery进行事件绑定 - 你为什么要自己动手使用XHR而不是简单地使用jQuery进行AJAX？

Jquery在fire bug中运行良好，但在页面上没有

1 个答案: