AjaxUpLoad.js怎样实现文件上传

这次给大家带来AjaxUpLoad.js怎样实现文件上传，AjaxUpLoad.js实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

AjaxUpload.js文件的代码，供大家参考，具体内容如下

/** 
 * AJAX Upload ( http://valums.com/ajax-upload/ ) 
 * Copyright (c) Andris Valums 
 * Licensed under the MIT license ( http://valums.com/mit-license/ ) 
 * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions 
 */ 
(function () { 
 /* global window */ 
 /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */ 
 
 /** 
  * Wrapper for FireBug's console.log 
  */ 
 
 function log() { 
  if (typeof(console) != 'undefined' && typeof(console.log) == 'function') { 
   Array.prototype.unshift.call(arguments, '[Ajax Upload]'); 
   console.log(Array.prototype.join.call(arguments, ' ')); 
  } 
 } 
 
 /** 
  * Attaches event to a dom element. 
  * @param {Element} el 
  * @param type event name 
  * @param fn callback This refers to the passed element 
  */ 
 
 function addEvent(el, type, fn) { 
  if (el.addEventListener) { 
   el.addEventListener(type, fn, false); 
  } else if (el.attachEvent) { 
   el.attachEvent('on' + type, function () { 
    fn.call(el); 
   }); 
  } else { 
   throw new Error('not supported or DOM not loaded'); 
  } 
 } 
 
 /** 
  * Attaches resize event to a window, limiting 
  * number of event fired. Fires only when encounteres 
  * delay of 100 after series of events. 
  * 
  * Some browsers fire event multiple times when resizing 
  * http://www.quirksmode.org/dom/events/resize.html 
  * 
  * @param fn callback This refers to the passed element 
  */ 
 
 function addResizeEvent(fn) { 
  var timeout; 
 
  addEvent(window, 'resize', function () { 
   if (timeout) { 
    clearTimeout(timeout); 
   } 
   timeout = setTimeout(fn, 100); 
  }); 
 } 
 
 // Needs more testing, will be rewriten for next version   
 // getOffset function copied from jQuery lib (http://jquery.com/) 
 if (document.documentElement.getBoundingClientRect) { 
  // Get Offset using getBoundingClientRect 
  // http://ejohn.org/blog/getboundingclientrect-is-awesome/ 
  var getOffset = function (el) { 
   var box = el.getBoundingClientRect(); 
   var doc = el.ownerDocument; 
   var body = doc.body; 
   var docElem = doc.documentElement; // for ie 
   var clientTop = docElem.clientTop || body.clientTop || 0; 
   var clientLeft = docElem.clientLeft || body.clientLeft || 0; 
 
   // In Internet Explorer 7 getBoundingClientRect property is treated as physical, 
   // while others are logical. Make all logical, like in IE8. 
   var zoom = 1; 
   if (body.getBoundingClientRect) { 
    var bound = body.getBoundingClientRect(); 
    zoom = (bound.right - bound.left) / body.clientWidth; 
   } 
 
   if (zoom > 1) { 
    clientTop = 0; 
    clientLeft = 0; 
   } 
 
   var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, 
    left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft; 
 
   return { 
    top: top, 
    left: left 
   }; 
  }; 
 } else { 
  // Get offset adding all offsets 
  var getOffset = function (el) { 
   var top = 0, 
    left = 0; 
   do { 
    top += el.offsetTop || 0; 
    left += el.offsetLeft || 0; 
    el = el.offsetParent; 
   } while (el); 
 
   return { 
    left: left, 
    top: top 
   }; 
  }; 
 } 
 
 /** 
  * Returns left, top, right and bottom properties describing the border-box, 
  * in pixels, with the top-left relative to the body 
  * @param {Element} el 
  * @return {Object} Contains left, top, right,bottom 
  */ 
 
 function getBox(el) { 
  var left, right, top, bottom; 
  var offset = getOffset(el); 
  left = offset.left; 
  top = offset.top; 
 
  right = left + el.offsetWidth; 
  bottom = top + el.offsetHeight; 
 
  return { 
   left: left, 
   right: right, 
   top: top, 
   bottom: bottom 
  }; 
 } 
 
 /** 
  * Helper that takes object literal 
  * and add all properties to element.style 
  * @param {Element} el 
  * @param {Object} styles 
  */ 
 
 function addStyles(el, styles) { 
  for (var name in styles) { 
   if (styles.hasOwnProperty(name)) { 
    el.style[name] = styles[name]; 
   } 
  } 
 } 
 
 /** 
  * Function places an absolutely positioned 
  * element on top of the specified element 
  * copying position and dimentions. 
  * @param {Element} from 
  * @param {Element} to 
  */ 
 
 function copyLayout(from, to) { 
  var box = getBox(from); 
 
  addStyles(to, { 
   position: 'absolute', 
   left: box.left + 'px', 
   top: box.top + 'px', 
   width: from.offsetWidth + 'px', 
   height: from.offsetHeight + 'px' 
  }); 
 } 
 
 /** 
  * Creates and returns element from html chunk 
  * Uses innerHTML to create an element 
  */ 
 var toElement = (function () { 
  var p = document.createElement('p'); 
  return function (html) { 
   p.innerHTML = html; 
   var el = p.firstChild; 
   return p.removeChild(el); 
  }; 
 })(); 
 
 /** 
  * Function generates unique id 
  * @return unique id 
  */ 
 var getUID = (function () { 
  var id = 0; 
  return function () { 
   return 'ValumsAjaxUpload' + id++; 
  }; 
 })(); 
 
 /** 
  * Get file name from path 
  * @param {String} file path to file 
  * @return filename 
  */ 
 
 function fileFromPath(file) { 
  return file.replace(/.*(\/|\\)/, ""); 
 } 
 
 /** 
  * Get file extension lowercase 
  * @param {String} file name 
  * @return file extenstion 
  */ 
 
 function getExt(file) { 
  return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : ''; 
 } 
 
 function hasClass(el, name) { 
  var re = new RegExp('\\b' + name + '\\b'); 
  return re.test(el.className); 
 } 
 
 function addClass(el, name) { 
  if (!hasClass(el, name)) { 
   el.className += ' ' + name; 
  } 
 } 
 
 function removeClass(el, name) { 
  var re = new RegExp('\\b' + name + '\\b'); 
  el.className = el.className.replace(re, ''); 
 } 
 
 function removeNode(el) { 
  el.parentNode.removeChild(el); 
 } 
 
 /** 
  * Easy styling and uploading 
  * @constructor 
  * @param button An element you want convert to 
  * upload button. Tested dimentions up to 500x500px 
  * @param {Object} options See defaults below. 
  */ 
 window.AjaxUpload = function (button, options) { 
  this._settings = { 
   // Location of the server-side upload script 
   action: 'upload.php', 
   // File upload name 
   name: 'userfile', 
   // Additional data to send 
   data: {}, 
   // Submit file as soon as it's selected 
   autoSubmit: true, 
   // The type of data that you're expecting back from the server. 
   // html and xml are detected automatically. 
   // Only useful when you are using json data as a response. 
   // Set to "json" in that case. 
   responseType: false, 
   // Class applied to button when mouse is hovered 
   hoverClass: 'hover', 
   // Class applied to button when AU is disabled 
   disabledClass: 'disabled', 
   // When user selects a file, useful with autoSubmit disabled 
   // You can return false to cancel upload    
   onChange: function (file, extension) {}, 
   // Callback to fire before file is uploaded 
   // You can return false to cancel upload 
   onSubmit: function (file, extension) {}, 
   // Fired when file upload is completed 
   // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! 
   onCom