0

アップロード ボックスがあり、画像をアップロードする Web ページがあります。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」イベントをリッスンする必要があります。これは、リクエストが完全に完了するまで複数回呼び出される可能性があります。

すぐに頭に浮かぶもう 1 つの質問: ボタンのイベント バインディングに jQuery を使用しています。

于 2013-07-08T09:31:25.080 に答える