0

アップロードした画像をプレビューしてフォルダに保存する ajax 関数を作成しました。問題は、ajax が 1 回しか呼び出されないことです。選択したファイルが画像でない場合、文字列が返され、新しい入力ファイル html が挿入され、古いファイル入力フィールドが置き換えられます。私は XHR に不慣れで、基本的なことしか理解していません。私の質問は、この ajax を 2 回呼び出すことは可能ですか。現在、Firebug は 1 つの aja 呼び出しのみを受け取ります。その後、どのファイルを選択しても何も起こりません。

var handleUpload = function (event) {   
var fileInput = document.getElementById('url2');
var session_user_id = <?php echo $session_user_id; ?>;
var profile_user_id = <?php echo $user_id; ?>   
var data = new FormData();
data.append('ajax', true);
data.append('file', fileInput.files[0]);
data.append('session_user_id', session_user_id);    
data.append('profile_user_id', profile_user_id);
var request = new XMLHttpRequest();

    request.upload.addEventListener('load',function(event) {
        $('#upload_progress').css('display', 'none');   
        });

    request.upload.addEventListener('error', function(event) {
        $('#uploaded').html('Upload Failed!');
        });

    //code below is part of callback of ajax
    request.addEventListener('readystatechange', function(event){

        if (this.readyState == 4){

        if (this.status == 200) {
            var links = document.getElementById('uploaded');
            var uploaded = eval(this.response);
            $('#uploaded').empty();
            if (uploaded[0] == 1 || uploaded[0] == 2 || uploaded[0] == 3) {
            $('#uploaded').html('Some error occured!');
            $('#container_for_url2').html('<input type="file" name="file" id="url2" />');                   
                } else {

            $('.preview_image_box2').html('<img width="' + uploaded[1] + '" height="' + uploaded[2] +'" style="position:relative;top:'+ uploaded[3]+'"  src="' + uploaded[0] + '"/>');  
            }
            }   
            } else {console.log('server replied with' + this.status)}               

        });

request.open('POST', 'ajax_upload_image_for_post.php');
request.setRequestHeader('Cache-Control', 'no-cache');
$('#upload_progress').css('display','block');
request.send(data);             
};

url2ここでは、入力ファイル フィールドにファイルが挿入されている場合に ajax 呼び出しを設定しています。これが問題だと思います。

$('#url2').change(function () {
handleUpload(); 
});
4

3 に答える 3

1

The line 

$('#container_for_url2').html('<input type="file" name="file" id="url2" />');

implies that the element to which the change handler is attached, is overwritten by its own action.

You can overcome this by delegating to the element's container as follows :

$('#container_for_url2').on('change', '#url2', handleUpload);

Note: We use .on() since jQuery 1.7 . .bind(), .live() and .delegate() are now deprecated.

EDIT

... as I now realise you already know because I just read your comment under @suke's answer :)

于 2012-09-22T01:43:04.333 に答える
1

入力 #url2 を置き換えているため、 $('#url2').change() は機能しません。代わりに委任してみてください

$('#container_for_url2').delegate('#url2', 'change', function() {
  handleUpload();
});
于 2012-09-22T01:31:45.670 に答える
0

念のため、ここで jquery を使用する形式を示します。私は通常物事をシンプルにするのが好きですが、ajax は jQuery が好きな理由の 1 つです。

これは、プラグインを必要としない JQUERY を使用したコードです

//Prepare params
var POSTParamsObject = {
    file : fileInput.files[0],
    session_user_id : session_user_id,
    profile_user_id : profile_user_id
}

//Function for handle upload
function handleUpload() {
    return $.ajax({
        url : 'ajax_upload_image_for_post.php',
        type : 'POST',
        data : POSTParamsObject,
        //dataType : 'json', //Uncomment if you don't use json as your response from server
        beforeSend: function ( xhr ) {
           $('#upload_progress').css('display','block');
        }/*,
        success : function(){//success code},
        error : function(){//error}
        */
   });
}    
//Run ajax call and respond to server response. First argument is the status 200 response, and second argument is to respond to errors 

$('#container_for_url2').on('change', '#url2', function(){

  $.when(handleUpload()).then(function(uploaded){//If request was successful...status 200   
    var links = document.getElementById('uploaded');
    $('#uploaded').empty();
    if (uploaded[0] == 1 || uploaded[0] == 2 || uploaded[0] == 3) {
       $('#uploaded').html('Some error occured!');
       $('#container_for_url2').html('<input type="file" name="file" id="url2" />');                   
    } else {
       $('.preview_image_box2').html('<img width="' + uploaded[1] + '" height="' + uploaded[2] +'" style="position:relative;top:'+ uploaded[3]+'"  src="' + uploaded[0] + '"/>');  
    }
  },
  function(response){//This is if there is a server error, or the wrong data type is returned
    console.log(response);
  });

});
于 2012-09-22T01:54:19.460 に答える