jquery插件ajaxupload实现文件上传操作_jquery

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

图1 文件上传前

图2 文件上传后

具体代码如下：

1、创建页面并编写HTML

上传文档: 

<div 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="删除" />
</div>

上传图片:

<div class="uploadImg">
  <img  src="/static/imghw/default1.png"  data-src="/images/nophoto.gif"  class="lazy"  id="imgShow" / alt="jquery插件ajaxupload实现文件上传操作_jquery" >
  <input type="hidden" id="hidImgName" />
  <input type="button" id="btnUploadImg" value="上传" />
  <input type="button" id="btnDeleteImg" value="删除" />
</div>

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='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>";
      }
    }
  });
}
//图片上传
function g_AjxUploadImg(btn, img, hidPut) {
  var button = btn, interval;
  new AjaxUpload(button, {
    action: '/Common/UploadHandler.ashx&#63;fileType=img',
    data: {},
    name: 'myfile',
    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 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 &#63; 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 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'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();
    }
  };
})();

以上就是ajaxupload实现文件上传操作的详细代码，希望对大家的学习有所帮助。