Question

我创建了一个ajax函数，用于预览上传的图像并将其保存到文件夹中。问题是ajax只被调用一次。如果我选择的文件不是图像，则返回一个字符串，并插入一个新的输入文件html，替换旧的文件输入字段。我对XHR不熟悉，只对它有基本的了解。我的问题是，有可能两次调用这个ajax，如果是这样的话。目前Firebug只收到一个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(); 
});

Answer 1

由于你要替换输入＃url2，$（'＃url2'）。change（）不起作用。尝试委托代替

$('#container_for_url2').delegate('#url2', 'change', function() {
  handleUpload();
});

Answer 2

该行

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

意味着附加change处理程序的元素会被其自己的操作覆盖。

您可以通过委派给元素的容器来解决这个问题，如下所示：

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

注意：自jQuery 1.7起我们使用.on()。现已弃用.bind()，.live()和.delegate()。

修改

...我现在意识到你已经知道了，因为我刚刚在@ suke的答案下阅读了你的评论：）

Answer 3

以防万一这里有帮助使用jquery的格式。我通常喜欢保持简单，但是ajax是我喜欢jQuery的东西之一。

这是带有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);
  });

});

AJAX只调用一次

3 个答案:

修改