AjaxUpLoad.js によるファイルアップロード機能の実装方法

本文主要为大家详细介绍了AjaxUpLoad.js实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

AjaxUpLoad.js的使用实现无刷新文件上传，如图。

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML

上传文档: 

<p class="uploadFile"> 
  <span id="doc"><input type="text" disabled="disabled" /></span> 
  <input type="hidden" id="hidFileName" /> 
  <input type="button" id="btnUploadFile" value="上传" /> 
  <input type="button" id="btnDeleteFile" value="删除" /> 
</p>

上传图片:

<p class="uploadImg"> 
  <img id="imgShow" src="/images/nophoto.gif" /> 
  <input type="hidden" id="hidImgName" /> 
  <input type="button" id="btnUploadImg" value="上传" /> 
  <input type="button" id="btnDeleteImg" value="删除" /> 
</p>

2、引用AjaxUpload.js文件

<script src="/js/common/AjaxUpload.js" type="text/javascript"></script>

3、编写JS脚本

window.onload = function() { 
  init(); //初始化 
} 
 
//初始化 
function init() { 
  //初始化文档上传 
  var btnFile = document.getElementById("btnUploadFile"); 
  var doc = document.getElementById("doc"); 
  var hidFileName = document.getElementById("hidFileName"); 
  document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); }; 
  g_AjxUploadFile(btnFile, doc, hidFileName); 
   
  //初始化图片上传 
  var btnImg = document.getElementById("btnUploadImg"); 
  var img = document.getElementById("imgShow"); 
  var hidImgName = document.getElementById("hidImgName"); 
  document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); }; 
  g_AjxUploadImg(btnImg, img, hidImgName); 
} 
 
 
var g_AjxTempDir = "/file/temp/"; 
//文档上传 
function g_AjxUploadFile(btn, doc, hidPut, action) { 
  var button = btn, interval; 
  new AjaxUpload(button, { 
  action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action), 
    data: {}, 
    name: 'myfile', 
    onSubmit: function(file, ext) { 
      if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) { 
        alert("您上传的文档格式不对，请重新选择！"); 
        return false; 
      } 
    }, 
    onComplete: function(file, response) { 
      flagValue = response; 
      if (flagValue == "1") { 
        alert("您上传的文档格式不对，请重新选择！"); 
      } 
      else if (flagValue == "2") { 
        alert("您上传的文档大于2M，请重新选择！"); 
      } 
      else if (flagValue == "3") { 
        alert("文档上传失败！"); 
      } 
      else { 
        hidPut.value = response; 
        doc.innerHTML="<a href=&#39;" + g_AjxTempDir + response + "&#39; target=&#39;_blank&#39;>" + response + "</a>"; 
      } 
    } 
  }); 
} 
//图片上传 
function g_AjxUploadImg(btn, img, hidPut) { 
  var button = btn, interval; 
  new AjaxUpload(button, { 
    action: &#39;/Common/UploadHandler.ashx?fileType=img&#39;, 
    data: {}, 
    name: &#39;myfile&#39;, 
    onSubmit: function(file, ext) { 
      if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) { 
        alert("您上传的图片格式不对，请重新选择！"); 
        return false; 
      } 
    }, 
    onComplete: function(file, response) { 
      flagValue = response; 
      if (flagValue == "1") { 
        alert("您上传的图片格式不对，请重新选择！"); 
      } 
      else if (flagValue == "2") { 
        alert("您上传的图片大于200K，请重新选择！"); 
      } 
      else if (flagValue == "3") { 
        alert("图片上传失败！"); 
      } 
      else { 
        hidPut.value = response; 
        img.src = g_AjxTempDir + response; 
      } 
    } 
  }); 
} 
 
//删除文档 
function DelFile(doc, hidPut) { 
  hidPut.value = ""; 
  doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />"; 
} 
 
//删除图片 
function DelImg(img, hidPut) { 
  hidPut.value = ""; 
  img.src = "/images/nophoto.gif"; 
}

4、创建/Common/UploadHandler.ashx处理程序

<%@ WebHandler Language="C#" Class="UploadHandler" %> 
 
using System; 
using System.Web; 
using System.Text.RegularExpressions; 
using System.IO; 
 
public class UploadHandler : IHttpHandler { 
  private string _filedir = "";  //文件目录 
  /// <summary> 
  /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功) 
  /// </summary> 
  /// <param name="context"></param> 
  public void ProcessRequest (HttpContext context) { 
    _filedir = context.Server.MapPath(@"/file/temp/"); 
    try 
    { 
      string result = "3"; 
      string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型 
      if (fileType == "file") 
      { 
        result = UploadFile(context); //文档上传 
      } 
      else if (fileType == "img") 
      { 
        result = UploadImg(context);  //图片上传 
      } 
      context.Response.Write(result); 
    } 
    catch 
    { 
      context.Response.Write("3");//3文件上传失败 
    } 
  } 
   
  /// <summary> 
  /// 文档上传 
  /// </summary> 
  /// <param name="context"></param> 
  /// <returns></returns> 
  private string UploadFile(HttpContext context) 
  { 
    int cout = context.Request.Files.Count; 
    if (cout > 0) 
    { 
      HttpPostedFile hpf = context.Request.Files[0]; 
      if (hpf != null) 
      { 
        string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
        //只能上传文件，过滤不可上传的文件类型  
        string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......"; 
        if (fileFilt.IndexOf(fileExt) <= -1) 
        { 
          return "1"; 
        } 
         
        //判断文件大小  
        int length = hpf.ContentLength; 
        if (length > 2097152) 
        { 
          return "2"; 
        }  
         
        Random rd = new Random(); 
        DateTime nowTime = DateTime.Now; 
        string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
        if (!Directory.Exists(_filedir)) 
        { 
          Directory.CreateDirectory(_filedir); 
        } 
        string fileName = _filedir + newFileName; 
        hpf.SaveAs(fileName); 
        return newFileName; 
      } 
 
    } 
    return "3"; 
  } 
 
  /// <summary> 
  /// 图片上传 
  /// </summary> 
  /// <param name="context"></param> 
  /// <returns></returns> 
  private string UploadImg(HttpContext context) 
  { 
    int cout = context.Request.Files.Count; 
    if (cout > 0) 
    { 
      HttpPostedFile hpf = context.Request.Files[0]; 
      if (hpf != null) 
      { 
        string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
        //只能上传文件，过滤不可上传的文件类型  
        string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......"; 
        if (fileFilt.IndexOf(fileExt) <= -1) 
        { 
          return "1"; 
        } 
         
        //判断文件大小  
        int length = hpf.ContentLength; 
        if (length > 204800) 
        { 
          return "2"; 
        } 
         
        Random rd = new Random(); 
        DateTime nowTime = DateTime.Now; 
        string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
        if (!Directory.Exists(_filedir)) 
        { 
          Directory.CreateDirectory(_filedir); 
        } 
        string fileName = _filedir + newFileName; 
        hpf.SaveAs(fileName); 
        return newFileName; 
      } 
 
    } 
    return "3"; 
  } 
   
  #region IHttpHandler 成员 
 
  public bool IsReusable 
  { 
    get { throw new NotImplementedException(); } 
  } 
 
  #endregion 
}

附件1：页面CSS样式

/*上传文件*/ 
.uploadFile{margin-bottom:10px;} 
/*上传图片*/ 
.uploadImg{} 
.uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}

附件2：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(); 
    } 
  }; 
})();

相关推荐：

laravel和ajax实现文件上传功能

Ajax配合Spring实现文件上传功能代码

详解使用nodejs+express实现简单的文件上传功能

以上がAjaxUpLoad.js によるファイルアップロード機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。