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 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();
}
};
})();