首页前端开发HTMLAjaxUpLoad.js怎样实现文件上传

AjaxUpLoad.js怎样实现文件上传

时间2024-01-23 09:06:25发布访客分类HTML浏览695
导读:收集整理的这篇文章主要介绍了AjaxUpLoad.js怎样实现文件上传,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来AjaxUpLoad.js怎样实现文件上传,AjaxUpLoad.js实现文件上传的注意事项有哪些,下面就...
收集整理的这篇文章主要介绍了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!    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='file' />
    /p>
    */   _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 p = document.createElement("p");
    addStyles(p, {
     '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 (p.style.opacity !== "0") {
     if (typeof(p.filters) == 'undefined') {
          throw new Error('Opacity not supported by the browser');
     }
         p.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';
     }
    );
         p.appendChild(input);
        document.body.appendChild(p);
         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 p = self._input.parentNode;
         copyLayout(self._button, p);
         p.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    // p ->
     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();
   }
  }
    ;
 }
    )();
    

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

使用H5做出添加禁止缩放

WebGL怎样操作json与echarts图表

select下拉框的右边怎么增加提示图标

以上就是AjaxUpLoad.js怎样实现文件上传的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

AjaxUpLoad.jsjavascript

若转载请注明出处: AjaxUpLoad.js怎样实现文件上传
本文地址: https://pptw.com/jishu/584000.html
Vue.directive()的图文详解 JsChart的组件使用详解

游客 回复需填写必要信息