Question

我一直在开发我的网站超过一年，我一直在学习。我现在正在开发一个上传页面，它使用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+' صورة');
          });
    });
  });

对不起它的语言是阿拉伯语，但这并不意味着什么重要..

Answer 1

您可以从同一文档发送多个HTTP请求，但不限于一次一个。

但请注意，不保证它们完成的顺序。另请注意浏览器limit the number of open HTTP requests per origin，因此如果您的连接数量过多，可能会出现一些延迟。

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

1 个答案: