ajax多个上传一个接一个没有jQuery

Question

我有以下情况。我使用XMLHttpRequest（）构建了以下上传器，这意味着没有jQuery。

var uploadFile = function(file) {
 addEvent(window,'beforeunload',cancel_upload);

 var ele = document.getElementsByClassName('gallery_list')[0];

  // Create element
  var div = document.createElement('div');
  div.className = 'img_item_list';

  var _it = $(".img_item_list").length;
  var _idm = 'photo_element_'+_it;

  var _str = '';
  _str+= '<div class="item"><a href="#" class="'+((_it==0) ? 'sort_up_disabled' : 'sort_up')+'"></a><a href="#" class="sort_down"></a></div>';
  _str+= '<div class="image"><img src="http://'+vi.staticHost+'/spacer.gif" class="photo"></div>';
  _str+= '<div class="image_actions">';
  _str+= '<div>Descripción: <input type="text" name="description[]" value="" maxlength="30"><span>Máximo 30 caracteres</span></div>';
  _str+= '<ul>';
  _str+= '<li><a class="delete_photo" data-file="" href="#">Remover</a></li>';
  _str+= '</ul>';
  _str+= '</div>';
  _str+= '<input type="hidden" name="image[]" value="">';

  var img;
  progressBarContainer = document.createElement("div");
  progressBar = document.createElement("div");
  progressBg = document.createElement("div");

  progressBarContainer.className = "progress-bar-container";
  progressBar.className = "progress-bar";
  progressBg.className = "progress-bg";
  progressBar.appendChild(progressBg);
  progressBarContainer.appendChild(progressBar);

  var _btn = document.createElement('button');
  _btn.innerHTML = 'Cancelar';
  _btn.className = 'cancel_upload';
  progressBarContainer.appendChild(_btn);

  div.innerHTML = _str;
  div.id = _idm;
  div.appendChild(progressBarContainer);
  ele.appendChild(div);

  var reader, xhr, fileInfo;

  if(typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
   reader = new FileReader();
   reader.onload = (function (theImg) { return function (evt) { 
    div.getElementsByClassName('image')[0].getElementsByTagName("img")[0].src = evt.target.result;
   }; }(img));
   reader.readAsDataURL(file);
  };

  /*
   If the file is an image and the web browser supports FileReader,
   present a preview in the file list
  */

  var formData = new FormData();
  formData.append('field','BldPhoto');
  formData.append('BldPhoto[]',file);

  // Uploading - for Firefox, Google Chrome and Safari
  xhr = new XMLHttpRequest();

  // Update progress bar
  xhr.upload.addEventListener("progress", function (evt) {
   if(evt.lengthComputable) {
    var prl = (evt.loaded / evt.total)*100;
    var _prg = div.getElementsByClassName("progress-bg")[0];
    var _prgd = div.getElementsByClassName("progress-bar")[0];


_prg.style.width = prl+"%";
   } else {
    // No data to calculate on
   };
  }, false);

  // File uploaded
  xhr.addEventListener("load", function () {
   removeEvent(window,'beforeunload',cancel_upload);
   var _prg = div.getElementsByClassName("progress-bg")[0];
   var _rp;
   if(JSON) {
    _rp = JSON.parse(this.response);
   };
   div.getElementsByClassName('image')[0].getElementsByTagName("img")[0].src = _rp.data.filename_data;
  }, false);

  xhr.open("POST", "/ax/manager/upload.php", true);
  xhr.setRequestHeader('Cache-Control','no-cache');
  xhr.send(formData);

};

/* Using drag and drop */
var uploadPhotoDrop = function(e) {
 e = e || window.event; // get window.event if e argument missing (in IE)   
 if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the image.
 this.removeAttribute('style');

 var dt    = e.dataTransfer;
 var files = dt.files;
 if(files.length<=_hdp.max_photo) {
  for(var i=0; i<files.length; i++) {
   var file = files[i];
   uploadFile(file);
  };
 };
 return false;
};

/* One click button method */
var uploadSingle = function(e) {
 var files = e.target.files;
 for(var i=0; i<files.length; i++) {
  var file = files[i];
  res = uploadFile(file);
 };
};

/* Init upload */
 if(window.File && window.FileReader) {
  addEvent(window,'load',function() {

   var status   = document.getElementById('upload_status_sel');
   var drop     = document.getElementById('upload_via_drop');
   var btup     = document.getElementById('bld_upload_photo');
   var btn      = document.getElementById('upload_launch_upload'); 

   var cancel_charge = function(e) { if(e.preventDefault) { e.preventDefault(); } return false; };
   var dragging = function(e) {
    this.style.border = 'dashed 4px rgba(139,178,54,1)';
    this.style.padding = '6px';
    if(e.preventDefault) { e.preventDefault(); };
    return false;
   };
   var dragout = function(e) {
    this.removeAttribute('style');
    if(e.preventDefault) { e.preventDefault(); };
    return false;
   };

   // Input file, if class "simple_old_school_upload" is detected load old school method
   addEvent(btup,'change',uploadSingle);

   // Click on area to open upload dialog
   addEvent(btn,'click',function(e) {
    document.getElementById('bld_upload_photo').click();
    e.preventDefault();
   });

   // Tells the browser that we *can* drop on this target
   addEvent(drop,'dragover',dragging); // Over object
   addEvent(drop,'dragleave',dragout); // 
   addEvent(drop,'dragend',dragout);
   addEvent(drop,'drop',uploadPhotoDrop);

  });
 } else {
  alert('Sorry, your browser not supports this feature');
 };

但是，当完成时，我不知道如何控制AJAX请求。示例：我有5张图片，我想在第一张图片结束后上传下一张图片。

我是怎么做到的？

谢谢！