從一個文檔發送兩個AJAX請求

我一直在開發我的網站已經有一年多的時間了，我一直在學習。我現在正在開發一個上傳頁面，該頁面使用AJAX處理上傳，並在上傳過程中顯示進度條，上傳文件後將所有上傳的文件臨時存儲在會話數組中，然後當最後一個按鈕被按下時圖像路徑將被存儲在數據庫中。從一個文檔發送兩個AJAX請求

但是，我偶然發現了一個AJAX問題 - 我並不擅長 - 我無法克服。當圖像上傳時，它會在每張圖像上用一個小的刪除按鈕顯示這些圖像的預覽，供用戶刪除不再需要的圖像。

我開始意識到，一旦我用AJAX上傳圖像，'刪除圖像'功能將不會處理，因爲AJAX請求已經被處理。我是否應該將這些函數包含在單獨的'.js'文件中，還是僅僅處理它是錯誤的。 an image to explain all of this

Ajax代碼：

//file upload ajax 


$(function() { 
    /* variables */ 

    var bar = $('.bar'); 
    var progress = $('.progress'); 

    /* submit form with ajax request using jQuery.form plugin */ 
    $('.upload_form').ajaxForm({ 

    /* set data type json */ 
    // dataType:'json', 

    /* reset before submitting */ 
    beforeSend: function() { 
     bar.width('0%'); 
     progress.css('display', 'block'); 
    }, 

    /* progress bar call back*/ 
    uploadProgress: function(event, position, total, percentComplete) { 
     var pVel = percentComplete + '%'; 
     bar.width(pVel); 
    }, 

    /* complete call back */ 
    complete: function(output){ 
    // var responseMessage = $.parseJSON(data.responseText); 
    progress.css('display', 'none'); 
    document.getElementById('next_step').innerHTML = ''.innerHTML = '<form method="post"><input type="submit" class="final_upload red_submit" name="uploadSubmit" value="الانتهاء" /></form>'; 
    //$('.status-message').html('<p>'+output.responseText+'</p>'); 
    var response = output.responseText; 
    var response_cut = response.substring(response.indexOf('<p class="n-st'), response.indexOf('cut text!')); 
    var response_preview = response.substring(response.indexOf('<div class="n-im'), response.indexOf('cut me!')); 
     $('.status-message').empty().html(response_cut); 
     $('#preview_images').empty().html(response_preview); 
     } 

    }); 
}); 

$(document).ready(function(){ 
    $('#upload_btn').change(function(){ 
    $('#upload_files').trigger('click'); 
    }); 
}); 

//delete image on click 

    $(document).ready(function(){ 
    $('.preview-img').click(function(){ 
      var current_image = $(this); 
      var img_src = $(this).attr('data-img-src'); 
      var img_count = parseInt($('.images_count').val()); 
      var url = 'upload.php'; 
      $.post(url, {del_img : img_src}, function(count_img){ 
       console.log(count_img); 
       current_image.hide(); 
       var new_count = img_count + 1; 
       $('.images_count').val(new_count); 
       $('.status-message').empty().html('تم مسح الصورة بنجاح، تبقى لديك '+new_count+' صورة'); 
      }); 
    }); 
    });

對不起，這是阿拉伯語，但它並不意味着什麼重要的語言..

來源

2017-03-21 Khalid

發佈您的ajax code.it可能會幫助我們給完美的代碼 – user3386779

嘿，當然我會更新現在的帖子！ – Khalid

不要在會話中存儲他們的詳細信息。使用由Ajax上傳返回的文件路徑爲每個文件添加一個隱藏的輸入到頁面。然後，如果有人刪除了一個圖像，你可以刪除該文件的輸入。 – Styphon

您可以發送同一文檔多個HTTP請求，你不限於一次。

但請注意，不能保證它們以何種順序完成。另外請注意，瀏覽器limit the number of open HTTP requests per origin，所以如果你的連接數量過多，你可能會看到一些延遲。

來源

2017-03-21 13:54:32 Timo

你好@Timo，抱歉，我根本不理解它。我已更新並添加了我的AJAX代碼，如果您可以請看一下並告訴我我的錯在哪裏？ – Khalid

從一個文檔發送兩個AJAX請求

回答

相關問題