透過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!
   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
   * <p><input type=&#39;file&#39; /></p>
   */
  _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;<iframe src="javascript:false;" name="&#39; + id + &#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;<form method="post" enctype="multipart/form-data"></form>&#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;<html></html>&#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 <pre class="brush:php;toolbar:false">
      // 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;<html></html>&#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();
  }
 };
})();

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

js构建二叉树进行数值数组的去重与优化详解

详解Vue 全局引入bass.scss 处理方案

使用node打造自己的命令行工具方法教程

以上是透過AjaxUpLoad.js實作檔案上傳的程式碼範例（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！