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&＃39;s console.log 
  */ 
 
 function log() { 
  if (typeof(console) != &＃39;undefined&＃39; && typeof(console.log) == &＃39;function&＃39;) { 
   Array.prototype.unshift.call(arguments, &＃39;[Ajax Upload]&＃39;); 
   console.log(Array.prototype.join.call(arguments, &＃39; &＃39;)); 
  } 
 } 
 
 /** 
  * 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(&＃39;on&＃39; + type, function () { 
    fn.call(el); 
   }); 
  } else { 
   throw new Error(&＃39;not supported or DOM not loaded&＃39;); 
  } 
 } 
 
 /** 
  * 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, &＃39;resize&＃39;, 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: &＃39;absolute&＃39;, 
   left: box.left + &＃39;px&＃39;, 
   top: box.top + &＃39;px&＃39;, 
   width: from.offsetWidth + &＃39;px&＃39;, 
   height: from.offsetHeight + &＃39;px&＃39; 
  }); 
 } 
 
 /** 
  * Creates and returns element from html chunk 
  * Uses innerHTML to create an element 
  */ 
 var toElement = (function () { 
  var p = document.createElement(&＃39;p&＃39;); 
  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 &＃39;ValumsAjaxUpload&＃39; + 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(&＃39;.&＃39;)) ? file.replace(/.*[.]/, &＃39;&＃39;) : &＃39;&＃39;; 
 } 
 
 function hasClass(el, name) { 
  var re = new RegExp(&＃39;\\b&＃39; + name + &＃39;\\b&＃39;); 
  return re.test(el.className); 
 } 
 
 function addClass(el, name) { 
  if (!hasClass(el, name)) { 
   el.className += &＃39; &＃39; + name; 
  } 
 } 
 
 function removeClass(el, name) { 
  var re = new RegExp(&＃39;\\b&＃39; + name + &＃39;\\b&＃39;); 
  el.className = el.className.replace(re, &＃39;&＃39;); 
 } 
 
 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: &＃39;upload.php&＃39;, 
   // File upload name 
   name: &＃39;userfile&＃39;, 
   // Additional data to send 
   data: {}, 
   // Submit file as soon as it&＃39;s selected 
   autoSubmit: true, 
   // The type of data that you&＃39;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: &＃39;hover&＃39;, 
   // Class applied to button when AU is disabled 
   disabledClass: &＃39;disabled&＃39;, 
   // 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! 
   onComplete: function (file, response) {} 
  }; 
 
  // Merge the users options with our defaults 
  for (var i in options) { 
   if (options.hasOwnProperty(i)) { 
    this._settings[i] = options[i]; 
   } 
  } 
 
  // button isn&＃39;t necessary a dom element 
  if (button.jquery) { 
   // jQuery object was passed 
   button = button[0]; 
  } else if (typeof button == "string") { 
   if (/^#.*/.test(button)) { 
    // If jQuery user passes #elementId don&＃39;t break it     
    button = button.slice(1); 
   } 
 
   button = document.getElementById(button); 
  } 
 
  if (!button || button.nodeType !== 1) { 
   throw new Error("Please make sure that you&＃39;re passing a valid element"); 
  } 
 
  if (button.nodeName.toUpperCase() == &＃39;A&＃39;) { 
   // disable link       
   addEvent(button, &＃39;click&＃39;, function (e) { 
    if (e && e.preventDefault) { 
     e.preventDefault(); 
    } else if (window.event) { 
     window.event.returnValue = false; 
    } 
   }); 
  } 
 
  // DOM element 
  this._button = button; 
  // DOM element     
  this._input = null; 
  // If disabled clicking on button won&＃39;t do anything 
  this._disabled = false; 
 
  // if the button was disabled before refresh if will remain 
  // disabled in FireFox, let&＃39;s fix it 
  this.enable(); 
 
  this._rerouteClicks(); 
 }; 
 
 // assigning methods to our class 
 AjaxUpload.prototype = { 
  setData: function (data) { 
   this._settings.data = data; 
  }, 
  disable: function () { 
   addClass(this._button, this._settings.disabledClass); 
   this._disabled = true; 
 
   var nodeName = this._button.nodeName.toUpperCase(); 
   if (nodeName == &＃39;INPUT&＃39; || nodeName == &＃39;BUTTON&＃39;) { 
    this._button.setAttribute(&＃39;disabled&＃39;, &＃39;disabled&＃39;); 
   } 
 
   // hide input 
   if (this._input) { 
    // We use visibility instead of display to fix problem with Safari 4 
    // The problem is that the value of input doesn&＃39;t change if it 
    // has display none when user selects a file    
    this._input.parentNode.style.visibility = &＃39;hidden&＃39;; 
   } 
  }, 
  enable: function () { 
   removeClass(this._button, this._settings.disabledClass); 
   this._button.removeAttribute(&＃39;disabled&＃39;); 
   this._disabled = false; 
 
  }, 
  /** 
   * Creates invisible file input 
   * that will hover above the button 
   * 
 
   */ 
  _createInput: function () { 
   var self = this; 
 
   var input = document.createElement("input"); 
   input.setAttribute(&＃39;type&＃39;, &＃39;file&＃39;); 
   input.setAttribute(&＃39;name&＃39;, this._settings.name); 
 
   addStyles(input, { 
    &＃39;position&＃39;: &＃39;absolute&＃39;, 
    // in Opera only &＃39;browse&＃39; button 
    // is clickable and it is located at 
    // the right side of the input 
    &＃39;right&＃39;: 0, 
    &＃39;margin&＃39;: 0, 
    &＃39;padding&＃39;: 0, 
    &＃39;fontSize&＃39;: &＃39;480px&＃39;, 
    &＃39;cursor&＃39;: &＃39;pointer&＃39; 
   }); 
 
   var p = document.createElement("p"); 
   addStyles(p, { 
    &＃39;display&＃39;: &＃39;block&＃39;, 
    &＃39;position&＃39;: &＃39;absolute&＃39;, 
    &＃39;overflow&＃39;: &＃39;hidden&＃39;, 
    &＃39;margin&＃39;: 0, 
    &＃39;padding&＃39;: 0, 
    &＃39;opacity&＃39;: 0, 
    // Make sure browse button is in the right side 
    // in Internet Explorer 
    &＃39;direction&＃39;: &＃39;ltr&＃39;, 
    //Max zIndex supported by Opera 9.0-9.2 
    &＃39;zIndex&＃39;: 2147483583 
   }); 
 
   // Make sure that element opacity exists. 
   // Otherwise use IE filter    
   if (p.style.opacity !== "0") { 
    if (typeof(p.filters) == &＃39;undefined&＃39;) { 
     throw new Error(&＃39;Opacity not supported by the browser&＃39;); 
    } 
    p.style.filter = "alpha(opacity=0)"; 
   } 
 
   addEvent(input, &＃39;change&＃39;, function () { 
 
    if (!input || input.value === &＃39;&＃39;) { 
     return; 
    } 
 
    // Get filename from input, required     
    // as some browsers have path instead of it   
    var file = fileFromPath(input.value); 
 
    if (false === self._settings.onChange.call(self, file, getExt(file))) { 
     self._clearInput(); 
     return; 
    } 
 
    // Submit form when value is changed 
    if (self._settings.autoSubmit) { 
     self.submit(); 
    } 
   }); 
 
   addEvent(input, &＃39;mouseover&＃39;, function () { 
    addClass(self._button, self._settings.hoverClass); 
   }); 
 
   addEvent(input, &＃39;mouseout&＃39;, function () { 
    removeClass(self._button, self._settings.hoverClass); 
 
    // We use visibility instead of display to fix problem with Safari 4 
    // The problem is that the value of input doesn&＃39;t change if it 
    // has display none when user selects a file    
    input.parentNode.style.visibility = &＃39;hidden&＃39;; 
 
   }); 
 
   p.appendChild(input); 
   document.body.appendChild(p); 
 
   this._input = input; 
  }, 
  _clearInput: function () { 
   if (!this._input) { 
    return; 
   } 
 
   // this._input.value = &＃39;&＃39;; Doesn&＃39;t work in IE6         
   removeNode(this._input.parentNode); 
   this._input = null; 
   this._createInput(); 
 
   removeClass(this._button, this._settings.hoverClass); 
  }, 
  /** 
   * Function makes sure that when user clicks upload button, 
   * the this._input is clicked instead 
   */ 
  _rerouteClicks: function () { 
   var self = this; 
 
   // IE will later display &＃39;access denied&＃39; error 
   // if you use using self._input.click() 
   // other browsers just ignore click() 
 
   addEvent(self._button, &＃39;mouseover&＃39;, function () { 
    if (self._disabled) { 
     return; 
    } 
 
    if (!self._input) { 
     self._createInput(); 
    } 
 
    var p = self._input.parentNode; 
    copyLayout(self._button, p); 
    p.style.visibility = &＃39;visible&＃39;; 
 
   }); 
 
 
   // commented because we now hide input on mouseleave 
   /** 
    * When the window is resized the elements 
    * can be misaligned if button position depends 
    * on window size 
    */ 
   //addResizeEvent(function(){ 
   // if (self._input){ 
   //  copyLayout(self._button, self._input.parentNode); 
   // } 
   //});    
 
  }, 
  /** 
   * Creates iframe with unique name 
   * @return {Element} iframe 
   */ 
  _createIframe: function () { 
   // We can&＃39;t use getTime, because it sometimes return 
   // same value in safari :( 
   var id = getUID(); 
 
   // We can&＃39;t use following code as the name attribute 
   // won&＃39;t be properly registered in IE6, and new window 
   // on form submit will open 
   // var iframe = document.createElement(&＃39;iframe&＃39;); 
   // iframe.setAttribute(&＃39;name&＃39;, id);       
 
   var iframe = toElement(&＃39;&＃39;); 
   // src="Javascript:false; was added 
   // because it possibly removes ie6 prompt 
   // "This page contains both secure and nonsecure items" 
   // Anyway, it doesn&＃39;t do any harm.    
   iframe.setAttribute(&＃39;id&＃39;, id); 
 
   iframe.style.display = &＃39;none&＃39;; 
   document.body.appendChild(iframe); 
 
   return iframe; 
  }, 
  /** 
   * Creates form, that will be submitted to iframe 
   * @param {Element} iframe Where to submit 
   * @return {Element} form 
   */ 
  _createForm: function (iframe) { 
   var settings = this._settings; 
 
   // We can&＃39;t use the following code in IE6 
   // var form = document.createElement(&＃39;form&＃39;); 
   // form.setAttribute(&＃39;method&＃39;, &＃39;post&＃39;); 
   // form.setAttribute(&＃39;enctype&＃39;, &＃39;multipart/form-data&＃39;); 
   // Because in this case file won&＃39;t be attached to request      
   var form = toElement(&＃39;&＃39;); 
 
   form.setAttribute(&＃39;action&＃39;, settings.action); 
   form.setAttribute(&＃39;target&＃39;, iframe.name); 
   form.style.display = &＃39;none&＃39;; 
   document.body.appendChild(form); 
 
   // Create hidden input element for each data key 
   for (var prop in settings.data) { 
    if (settings.data.hasOwnProperty(prop)) { 
     var el = document.createElement("input"); 
     el.setAttribute(&＃39;type&＃39;, &＃39;hidden&＃39;); 
     el.setAttribute(&＃39;name&＃39;, prop); 
     el.setAttribute(&＃39;value&＃39;, settings.data[prop]); 
     form.appendChild(el); 
    } 
   } 
   return form; 
  }, 
  /** 
   * Gets response from iframe and fires onComplete event when ready 
   * @param iframe 
   * @param file Filename to use in onComplete callback 
   */ 
  _getResponse: function (iframe, file) { 
   // getting response 
   var toDeleteFlag = false, 
    self = this, 
    settings = this._settings; 
 
   addEvent(iframe, &＃39;load&＃39;, function () { 
 
    if ( // For Safari 
    iframe.src == "Javascript:&＃39;%3Chtml%3E%3C/html%3E&＃39;;" || 
    // For FF, IE 
    iframe.src == "Javascript:&＃39;&＃39;;") { 
     // First time around, do not delete. 
     // We reload to blank page, so that reloading main page 
     // does not re-submit the post. 
 
     if (toDeleteFlag) { 
      // Fix busy state in FF3 
      setTimeout(function () { 
       removeNode(iframe); 
      }, 
      0); 
     } 
 
     return; 
    } 
 
    var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document; 
 
    // fixing Opera 9.26,10.00 
    if (doc.readyState && doc.readyState != &＃39;complete&＃39;) { 
     // Opera fires load event multiple times 
     // Even when the DOM is not ready yet 
     // this fix should not affect other browsers 
     return; 
    } 
 
    // fixing Opera 9.64 
    if (doc.body && doc.body.innerHTML == "false") { 
     // In Opera 9.64 event was fired second time 
     // when body.innerHTML changed from false 
     // to server response approx. after 1 sec 
     return; 
    } 
 
    var response; 
 
    if (doc.XMLDocument) { 
     // response is a xml document Internet Explorer property 
     respOnse= doc.XMLDocument; 
    } else if (doc.body) { 
     // response is html document or plain text 
     respOnse= doc.body.innerHTML; 
 
     if (settings.responseType && settings.responseType.toLowerCase() == &＃39;json&＃39;) { 
      // If the document was sent as &＃39;application/Javascript&＃39; or 
      // &＃39;text/Javascript&＃39;, then the browser wraps the text in a 
 
      // tag and performs html encoding on the contents. In this case, 
      // we need to pull the original text content from the text node&＃39;s 
      // nodeValue property to retrieve the unmangled content. 
      // Note that IE6 only understands text/html 
      if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == &＃39;PRE&＃39;) { 
       respOnse= doc.body.firstChild.firstChild.nodeValue; 
      } 
 
      if (response) { 
       respOnse= eval("(" + response + ")"); 
      } else { 
       respOnse= {}; 
      } 
     } 
    } else { 
     // response is a xml document 
     respOnse= doc; 
    } 
 
    settings.onComplete.call(self, file, response); 
 
    // Reload blank page, so that reloading main page 
    // does not re-submit the post. Also, remember to 
    // delete the frame 
    toDeleteFlag = true; 
 
    // Fix IE mixed content issue 
    iframe.src = "Javascript:&＃39;&＃39;;"; 
   }); 
  }, 
  /** 
   * Upload file contained in this._input 
   */ 
  submit: function () { 
   var self = this, 
    settings = this._settings; 
 
   if (!this._input || this._input.value === &＃39;&＃39;) { 
    return; 
   } 
 
   var file = fileFromPath(this._input.value); 
 
   // user returned false to cancel upload 
   if (false === settings.onSubmit.call(this, file, getExt(file))) { 
    this._clearInput(); 
    return; 
   } 
 
   // sending request  
   var iframe = this._createIframe(); 
   var form = this._createForm(iframe); 
 
   // assuming following structure 
   // p -> input type=&＃39;file&＃39; 
   removeNode(this._input.parentNode); 
   removeClass(self._button, self._settings.hoverClass); 
 
   form.appendChild(this._input); 
 
   form.submit(); 
 
   // request set, clean up     
   removeNode(form); 
   form = null; 
   removeNode(this._input); 
   this._input = null; 
 
   // Get response from iframe and fire onComplete event when ready 
   this._getResponse(iframe, file); 
 
   // get ready for next request    
   this._createInput(); 
  } 
 }; 
})();
感谢你能够认真阅读完这篇文章，希望小编分享AjaxUpLoad.js如何实现文件上传内容对大家有帮助，同时也希望大家多多支持编程笔记，关注编程笔记行业资讯频道，遇到问题就找编程笔记，详细的解决方法等着你来学习!