Javascript 从一个文档发送两个AJAX请求

我已经开发我的网站一年多了，我正在学习。我现在正在制作一个上传页面，该页面使用AJAX处理上传，并在上传过程中显示进度条。上传文件后，它将所有上传的文件临时存储在一个会话数组中，然后当按下最后一个按钮时，图像路径将存储在数据库中

然而，我偶然发现了AJAX的一个问题——我并不擅长这个问题——我无法克服。上传图像时，会显示这些图像的预览，每个图像上都有一个小的删除按钮，供用户删除他们不再需要的图像

我意识到，一旦我用AJAX上传了一个图像，“删除图像”功能就不会处理，因为AJAX请求已经被处理过了。我应该将函数包含在单独的“.js”文件中，还是只是处理错了。

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+' صورة');
          });
    });
  });

//文件上传ajax
$（函数（）{
/*变数*/
var bar=$（'.bar'）；
变量进度=$（'.progress'）；
/*使用jQuery.form插件提交带有ajax请求的表单*/
$（'.upload_form'）.ajaxForm({
/*设置数据类型json*/
//数据类型：'json'，
/*提交前重置*/
beforeSend:function（）{
条形宽度（'0%'）；
css（'display'，'block'）；
},
/*进度条回调*/
上载进度：功能（事件、位置、总数、完成百分比）{
var pVel=完成百分比+'%'；
钢筋宽度（pVel）；
},
/*完全回拨*/
完成：功能（输出）{
//var responseMessage=$.parseJSON（data.responseText）；
css（'display'，'none'）；
document.getElementById（“下一步”）.innerHTML=''.innerHTML=''；
//$（'.status message'）.html（''+output.responseText+'
'）；
var响应=output.responseText；
var response_cut=response.substring（response.indexOf（“）您可以从同一文档发送多个HTTP请求，但一次不限于一个

但是请注意，不能保证它们的完成顺序。还要注意浏览器，因此如果连接数量过多，您可能会看到一些延迟。
发布您的ajax代码。这可能有助于我们提供完美的代码嘿，当然我现在会更新帖子！不要在会话中存储它们的详细信息。为您添加隐藏的输入每个文件的ur页面，带有Ajax上传返回的文件路径。如果有人删除了一个图像，您可以删除该文件的输入。Hello@Timo，对不起，我一点也不理解。我已经更新并添加了我的Ajax代码，请看一下，告诉我哪里错了？