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 div = document.createelement('div'); 
  return function (html) { 
   div.innerhtml = html; 
   var el = div.firstchild; 
   return div.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! 
   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'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't break it     
    button = button.slice(1); 
   } 
 
   button = document.getelementbyid(button); 
  } 
 
  if (!button || button.nodetype !== 1) { 
   throw new error("please make sure that you're passing a valid element"); 
  } 
 
  if (button.nodename.touppercase() == 'a') { 
   // disable link       
   addevent(button, 'click', 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't do anything 
  this._disabled = false; 
 
  // if the button was disabled before refresh if will remain 
  // disabled in firefox, let'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 == 'input' || nodename == 'button') { 
    this._button.setattribute('disabled', 'disabled'); 
   } 
 
   // 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't change if it 
    // has display none when user selects a file    
    this._input.parentnode.style.visibility = 'hidden'; 
   } 
  }, 
  enable: function () { 
   removeclass(this._button, this._settings.disabledclass); 
   this._button.removeattribute('disabled'); 
   this._disabled = false; 
 
  }, 
  /** 
   * creates invisible file input 
   * that will hover above the button 
   * <div><input type='file' /></div> 
   */ 
  _createinput: function () { 
   var self = this; 
 
   var input = document.createelement("input"); 
   input.setattribute('type', 'file'); 
   input.setattribute('name', this._settings.name); 
 
   addstyles(input, { 
    'position': 'absolute', 
    // in opera only 'browse' button 
    // is clickable and it is located at 
    // the right side of the input 
    'right': 0, 
    'margin': 0, 
    'padding': 0, 
    'fontsize': '480px', 
    'cursor': 'pointer' 
   }); 
 
   var div = document.createelement("div"); 
   addstyles(div, { 
    'display': 'block', 
    'position': 'absolute', 
    'overflow': 'hidden', 
    'margin': 0, 
    'padding': 0, 
    'opacity': 0, 
    // make sure browse button is in the right side 
    // in internet explorer 
    'direction': 'ltr', 
    //max zindex supported by opera 9.0-9.2 
    'zindex': 2147483583 
   }); 
 
   // make sure that element opacity exists. 
   // otherwise use ie filter    
   if (div.style.opacity !== "0") { 
    if (typeof(div.filters) == 'undefined') { 
     throw new error('opacity not supported by the browser'); 
    } 
    div.style.filter = "alpha(opacity=0)"; 
   } 
 
   addevent(input, 'change', function () { 
 
    if (!input || input.value === '') { 
     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, 'mouseover', function () { 
    addclass(self._button, self._settings.hoverclass); 
   }); 
 
   addevent(input, 'mouseout', 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't change if it 
    // has display none when user selects a file    
    input.parentnode.style.visibility = 'hidden'; 
 
   }); 
 
   div.appendchild(input); 
   document.body.appendchild(div); 
 
   this._input = input; 
  }, 
  _clearinput: function () { 
   if (!this._input) { 
    return; 
   } 
 
   // this._input.value = ''; doesn'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 'access denied' error 
   // if you use using self._input.click() 
   // other browsers just ignore click() 
 
   addevent(self._button, 'mouseover', function () { 
    if (self._disabled) { 
     return; 
    } 
 
    if (!self._input) { 
     self._createinput(); 
    } 
 
    var div = self._input.parentnode; 
    copylayout(self._button, div); 
    div.style.visibility = 'visible'; 
 
   }); 
 
 
   // 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't use gettime, because it sometimes return 
   // same value in safari :( 
   var id = getuid(); 
 
   // we can't use following code as the name attribute 
   // won't be properly registered in ie6, and new window 
   // on form submit will open 
   // var iframe = document.createelement('iframe'); 
   // iframe.setattribute('name', id);       
 
   var iframe = toelement('<iframe src="javascript:false;" name="' + id + '" />'); 
   // src="javascript:false; was added 
   // because it possibly removes ie6 prompt 
   // "this page contains both secure and nonsecure items" 
   // anyway, it doesn't do any harm.    
   iframe.setattribute('id', id); 
 
   iframe.style.display = 'none'; 
   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't use the following code in ie6 
   // var form = document.createelement('form'); 
   // form.setattribute('method', 'post'); 
   // form.setattribute('enctype', 'multipart/form-data'); 
   // because in this case file won't be attached to request      
   var form = toelement('<form method="post" enctype="multipart/form-data"></form>'); 
 
   form.setattribute('action', settings.action); 
   form.setattribute('target', iframe.name); 
   form.style.display = 'none'; 
   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('type', 'hidden'); 
     el.setattribute('name', prop); 
     el.setattribute('value', 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, 'load', function () { 
 
    if ( // for safari 
    iframe.src == "javascript:'%3chtml%3e%3c/html%3e';" || 
    // for ff, ie 
    iframe.src == "javascript:'<html></html>';") { 
     // 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 != 'complete') { 
     // 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() == 'json') { 
      // if the document was sent as 'application/javascript' or 
      // 'text/javascript', then the browser wraps the text in a <pre> 
      // tag and performs html encoding on the contents. in this case, 
      // we need to pull the original text content from the text node's 
      // nodevalue property to retrieve the unmangled content. 
      // note that ie6 only understands text/html 
      if (doc.body.firstchild && doc.body.firstchild.nodename.touppercase() == 'pre') { 
       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:'<html></html>';"; 
   }); 
  }, 
  /** 
   * upload file contained in this._input 
   */ 
  submit: function () { 
   var self = this, 
    settings = this._settings; 
 
   if (!this._input || this._input.value === '') { 
    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 
   // div -> input type='file' 
   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(); 
  } 
 }; 
})();