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

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

作者：pan_junbiao 字体：[增加 减小] 类型：转载 时间：2015-12-09 我要评论

这篇文章主要介绍了jquery插件ajaxupload实现文件上传操作，感兴趣的小伙伴们可以参考一下

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

图1 文件上传前

图2 文件上传后

具体代码如下：

1、创建页面并编写HTML

上传文档: 

?

1 2 3 4 5 6

< 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 >

上传图片: 

?

1 2 3 4 5 6

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

2、引用AjaxUpload.js文件

?

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

3、编写JS脚本

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

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?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处理程序

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

<%@ 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样式

?

1 2 3 4 5

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

附件2：AjaxUpload.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688

/**   * AJAX Upload ( http://valums.com/ajax-upload/ )   * Copyright (c) Andris Valums   * Licensed under the MIT license ( http://valums.com/mit-license/ )   * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions   */ ( function () {    /* global window */    /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */       /**     * Wrapper for FireBug's console.log     */       function log() {      if ( typeof (console) != 'undefined ' && typeof(console.log) == ' function ') {        Array.prototype.unshift.call(arguments, ' [Ajax Upload] ');        console.log(Array.prototype.join.call(arguments, ' '));      }    }       /**     * Attaches event to a dom element.     * @param {Element} el     * @param type event name     * @param fn callback This refers to the passed element     */       function addEvent(el, type, fn) {      if (el.addEventListener) {        el.addEventListener(type, fn, false);      } else if (el.attachEvent) {        el.attachEvent(' on ' + type, function () {          fn.call(el);        });      } else {        throw new Error(' not supported or DOM not loaded ');      }    }       /**     * Attaches resize event to a window, limiting     * number of event fired. Fires only when encounteres     * delay of 100 after series of events.     *     * Some browsers fire event multiple times when resizing     * http://www.quirksmode.org/dom/events/resize.html     *     * @param fn callback This refers to the passed element     */       function addResizeEvent(fn) {      var timeout;         addEvent(window, ' resize ', function () {        if (timeout) {          clearTimeout(timeout);        }        timeout = setTimeout(fn, 100);      });    }       // Needs more testing, will be rewriten for next version        // getOffset function copied from jQuery lib (http://jquery.com/)    if (document.documentElement.getBoundingClientRect) {      // Get Offset using getBoundingClientRect      // http://ejohn.org/blog/getboundingclientrect-is-awesome/      var getOffset = function (el) {        var box = el.getBoundingClientRect();        var doc = el.ownerDocument;        var body = doc.body;        var docElem = doc.documentElement; // for ie         var clientTop = docElem.clientTop || body.clientTop || 0;        var clientLeft = docElem.clientLeft || body.clientLeft || 0;           // In Internet Explorer 7 getBoundingClientRect property is treated as physical,        // while others are logical. Make all logical, like in IE8.         var zoom = 1;        if (body.getBoundingClientRect) {          var bound = body.getBoundingClientRect();          zoom = (bound.right - bound.left) / body.clientWidth;        }           if (zoom > 1) {          clientTop = 0;          clientLeft = 0;        }           var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop,          left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft;           return {          top: top,          left: left        };      };    } else {      // Get offset adding all offsets       var getOffset = function (el) {        var top = 0,          left = 0;        do {          top += el.offsetTop || 0;          left += el.offsetLeft || 0;          el = el.offsetParent;        } while (el);           return {          left: left,          top: top        };      };    }       /**     * Returns left, top, right and bottom properties describing the border-box,     * in pixels, with the top-left relative to the body     * @param {Element} el     * @return {Object} Contains left, top, right,bottom     */       function getBox(el) {      var left, right, top, bottom;      var offset = getOffset(el);      left = offset.left;      top = offset.top;         right = left + el.offsetWidth;      bottom = top + el.offsetHeight;         return {        left: left,        right: right,        top: top,        bottom: bottom      };    }       /**     * Helper that takes object literal     * and add all properties to element.style     * @param {Element} el     * @param {Object} styles     */       function addStyles(el, styles) {      for (var name in styles) {        if (styles.hasOwnProperty(name)) {          el.style[name] = styles[name];        }      }    }       /**     * Function places an absolutely positioned     * element on top of the specified element     * copying position and dimentions.     * @param {Element} from     * @param {Element} to     */       function copyLayout(from, to) {      var box = getBox(from);         addStyles(to, {        position: ' absolute ',        left: box.left + ' px ',        top: box.top + ' px ',        width: from.offsetWidth + ' px ',        height: from.offsetHeight + ' px '      });    }       /**     * Creates and returns element from html chunk     * Uses innerHTML to create an element     */    var toElement = (function () {      var div = document.createElement(' div ');      return function (html) {        div.innerHTML = html;        var el = div.firstChild;        return div.removeChild(el);      };    })();       /**     * Function generates unique id     * @return unique id     */    var getUID = (function () {      var id = 0;      return function () {        return ' ValumsAjaxUpload ' + id++;      };    })();       /**     * Get file name from path     * @param {String} file path to file     * @return filename     */       function fileFromPath(file) {      return file.replace(/.*(\/|\\)/, "");    }       /**     * Get file extension lowercase     * @param {String} file name     * @return file extenstion     */       function getExt(file) {      return (-1 !== file.indexOf(' . ')) ? file.replace(/.*[.]/, ' ') : ' ';    }       function hasClass(el, name) {      var re = new RegExp(' \\b ' + name + ' \\b ');      return re.test(el.className);    }       function addClass(el, name) {      if (!hasClass(el, name)) {        el.className += ' ' + name;      }    }       function removeClass(el, name) {      var re = new RegExp(' \\b ' + name + ' \\b ');      el.className = el.className.replace(re, ' ');    }       function removeNode(el) {      el.parentNode.removeChild(el);    }       /**     * Easy styling and uploading     * @constructor     * @param button An element you want convert to     * upload button. Tested dimentions up to 500x500px     * @param {Object} options See defaults below.     */    window.AjaxUpload = function (button, options) {      this._settings = {        // Location of the server-side upload script        action: ' upload.php ',        // File upload name        name: ' userfile ',        // Additional data to send        data: {},        // Submit file as soon as it' s selected        autoSubmit: true ,        // The type of data that you're expecting back from the server.        // html and xml are detected automatically.        // Only useful when you are using json data as a response.        // Set to "json" in that case.         responseType: false ,        // Class applied to button when mouse is hovered        hoverClass: 'hover ',        // Class applied to button when AU is disabled        disabledClass: ' disabled ',        // When user selects a file, useful with autoSubmit disabled        // You can return false to cancel upload              onChange: function (file, extension) {},        // Callback to fire before file is uploaded        // You can return false to cancel upload        onSubmit: function (file, extension) {},        // Fired when file upload is completed        // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!        onComplete: function (file, response) {}      };         // Merge the users options with our defaults      for (var i in options) {        if (options.hasOwnProperty(i)) {          this._settings[i] = options[i];        }      }         // button isn' t necessary a dom element      if (button.jquery) {        // jQuery object was passed        button = button[0];      } else if ( typeof button == "string" ) {        if (/^ #.*/.test(button)) {          // If jQuery user passes #elementId don't break it                   button = button.slice(1);        }           button = document.getElementById(button);      }         if (!button || button.nodeType !== 1) {        throw new Error( "Please make sure that you're passing a valid element" );      }         if (button.nodeName.toUpperCase() == 'A' ) {        // disable link                    addEvent(button, 'click' , function (e) {          if (e && e.preventDefault) {            e.preventDefault();          } else if (window.event) {            window.event.returnValue = false ;          }        });      }         // DOM element      this ._button = button;      // DOM element               this ._input = null ;      // If disabled clicking on button won't do anything      this ._disabled = false ;         // if the button was disabled before refresh if will remain      // disabled in FireFox, let's fix it      this .enable();         this ._rerouteClicks();    };       // assigning methods to our class    AjaxUpload.prototype = {      setData: function (data) {        this ._settings.data = data;      },      disable: function () {        addClass( this ._button, this ._settings.disabledClass);        this ._disabled = true ;           var nodeName = this ._button.nodeName.toUpperCase();        if (nodeName == 'INPUT' || nodeName == 'BUTTON' ) {          this ._button.setAttribute( 'disabled' , 'disabled' );        }           // hide input        if ( this ._input) {          // We use visibility instead of display to fix problem with Safari 4          // The problem is that the value of input doesn't change if it           // has display none when user selects a file                this ._input.parentNode.style.visibility = 'hidden ';        }      },      enable: function () {        removeClass(this._button, this._settings.disabledClass);        this._button.removeAttribute(' disabled ');        this._disabled = false;         },      /**       * Creates invisible file input       * that will hover above the button       * <div><input type=' file ' /></div>       */      _createInput: function () {        var self = this;           var input = document.createElement("input");        input.setAttribute(' type ', ' file ');        input.setAttribute(' name ', this._settings.name);           addStyles(input, {          ' position ': ' absolute ',          // in Opera only ' browse ' button          // is clickable and it is located at          // the right side of the input          ' right ': 0,          ' margin ': 0,          ' padding ': 0,          ' fontSize ': ' 480px ',          ' cursor ': ' pointer '        });           var div = document.createElement("div");        addStyles(div, {          ' display ': ' block ',          ' position ': ' absolute ',          ' overflow ': ' hidden ',          ' margin ': 0,          ' padding ': 0,          ' opacity ': 0,          // Make sure browse button is in the right side          // in Internet Explorer          ' direction ': ' ltr ',          //Max zIndex supported by Opera 9.0-9.2          ' zIndex ': 2147483583        });           // Make sure that element opacity exists.        // Otherwise use IE filter              if (div.style.opacity !== "0") {          if (typeof(div.filters) == ' undefined ') {            throw new Error(' Opacity not supported by the browser ');          }          div.style.filter = "alpha(opacity=0)";        }           addEvent(input, ' change ', function () {             if (!input || input.value === ' ') {            return;          }             // Get filename from input, required                  // as some browsers have path instead of it               var file = fileFromPath(input.value);             if (false === self._settings.onChange.call(self, file, getExt(file))) {            self._clearInput();            return;          }             // Submit form when value is changed          if (self._settings.autoSubmit) {            self.submit();          }        });           addEvent(input, ' mouseover ', function () {          addClass(self._button, self._settings.hoverClass);        });           addEvent(input, ' mouseout ', function () {          removeClass(self._button, self._settings.hoverClass);             // We use visibility instead of display to fix problem with Safari 4          // The problem is that the value of input doesn' t change if it           // has display none when user selects a file                input.parentNode.style.visibility = 'hidden' ;           });           div.appendChild(input);        document.body.appendChild(div);           this ._input = input;      },      _clearInput: function () {        if (! this ._input) {          return ;        }           // this._input.value = ''; Doesn't work in IE6                        removeNode( this ._input.parentNode);        this ._input = null ;        this ._createInput();           removeClass( this ._button, this ._settings.hoverClass);      },      /**       * Function makes sure that when user clicks upload button,       * the this._input is clicked instead       */      _rerouteClicks: function () {        var self = this ;           // IE will later display 'access denied' error        // if you use using self._input.click()        // other browsers just ignore click()           addEvent(self._button, 'mouseover ', function () {          if (self._disabled) {            return;          }             if (!self._input) {            self._createInput();          }             var div = self._input.parentNode;          copyLayout(self._button, div);          div.style.visibility = ' visible ';           });              // commented because we now hide input on mouseleave        /**         * When the window is resized the elements         * can be misaligned if button position depends         * on window size         */        //addResizeEvent(function(){        //  if (self._input){        //    copyLayout(self._button, self._input.parentNode);        //  }        //});               },      /**       * Creates iframe with unique name       * @return {Element} iframe       */      _createIframe: function () {        // We can' t use getTime, because it sometimes return        // same value in safari :(        var id = getUID();           // We can't use following code as the name attribute        // won't be properly registered in IE6, and new window        // on form submit will open        // var iframe = document.createElement('iframe');        // iframe.setAttribute('name', id);                       var iframe = toElement( '<iframe src="javascript:false;" name="' + id + '" />' );        // src="javascript:false; was added        // because it possibly removes ie6 prompt         // "This page contains both secure and nonsecure items"        // Anyway, it doesn't do any harm.              iframe.setAttribute('id ', id);           iframe.style.display = ' none ';        document.body.appendChild(iframe);           return iframe;      },      /**       * Creates form, that will be submitted to iframe       * @param {Element} iframe Where to submit       * @return {Element} form       */      _createForm: function (iframe) {        var settings = this._settings;           // We can' t use the following code in IE6        // var form = document.createElement('form');        // form.setAttribute('method', 'post');        // form.setAttribute('enctype', 'multipart/form-data');        // Because in this case file won't be attached to request                  var form = toElement('<form method="post " enctype=" multipart/form-data "></form>');           form.setAttribute('action', settings.action);        form.setAttribute('target', iframe.name);        form.style.display = 'none';        document.body.appendChild(form);           // Create hidden input element for each data key        for (var prop in settings.data) {          if (settings.data.hasOwnProperty(prop)) {            var el = document.createElement(" input ");            el.setAttribute('type', 'hidden');            el.setAttribute('name', prop);            el.setAttribute('value', settings.data[prop]);            form.appendChild(el);          }        }        return form;      },      /**       * Gets response from iframe and fires onComplete event when ready       * @param iframe       * @param file Filename to use in onComplete callback       */      _getResponse: function (iframe, file) {        // getting response        var toDeleteFlag = false,          self = this,          settings = this._settings;           addEvent(iframe, 'load', function () {             if ( // For Safari           iframe.src == " javascript:'%3Chtml%3E%3C/html%3E ';" ||          // For FF, IE          iframe.src == "javascript:' <html></html> ';") {            // First time around, do not delete.            // We reload to blank page, so that reloading main page            // does not re-submit the post.               if (toDeleteFlag) {              // Fix busy state in FF3              setTimeout(function () {                removeNode(iframe);              },              0);            }               return;          }             var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;             // fixing Opera 9.26,10.00          if (doc.readyState && doc.readyState != ' complete ') {            // Opera fires load event multiple times            // Even when the DOM is not ready yet            // this fix should not affect other browsers            return;          }             // fixing Opera 9.64          if (doc.body && doc.body.innerHTML == "false") {            // In Opera 9.64 event was fired second time            // when body.innerHTML changed from false             // to server response approx. after 1 sec            return;          }             var response;             if (doc.XMLDocument) {            // response is a xml document Internet Explorer property            response = doc.XMLDocument;          } else if (doc.body) {            // response is html document or plain text            response = doc.body.innerHTML;               if (settings.responseType && settings.responseType.toLowerCase() == ' json ') {              // If the document was sent as ' application/javascript ' or              // ' text/javascript ', then the browser wraps the text in a <pre>              // tag and performs html encoding on the contents. In this case,              // we need to pull the original text content from the text node' s              // nodeValue property to retrieve the unmangled content.              // Note that IE6 only understands text/html              if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE' ) {                response = doc.body.firstChild.firstChild.nodeValue;              }                 if (response) {                response = eval("( " + response + " ) ");              } else {                response = {};              }            }          } else {            // response is a xml document            response = doc;          }             settings.onComplete.call(self, file, response);             // Reload blank page, so that reloading main page          // does not re-submit the post. Also, remember to          // delete the frame          toDeleteFlag = true;             // Fix IE mixed content issue          iframe.src = " javascript: '<html></html>' ;";        });      },      /**       * Upload file contained in this._input       */      submit: function () {        var self = this ,          settings = this ._settings;           if (! this ._input || this ._input.value === '' ) {          return ;        }           var file = fileFromPath( this ._input.value);           // user returned false to cancel upload        if ( false === settings.onSubmit.call( this , file, getExt(file))) {          this ._clearInput();          return ;        }           // sending request          var iframe = this ._createIframe();        var form = this ._createForm(iframe);           // assuming following structure        // div -> input type='file'        removeNode( this ._input.parentNode);        removeClass(self._button, self._settings.hoverClass);           form.appendChild( this ._input);           form.submit();           // request set, clean up                removeNode(form);        form = null ;        removeNode( this ._input);        this ._input = null ;           // Get response from iframe and fire onComplete event when ready        this ._getResponse(iframe, file);           // get ready for next request              this ._createInput();      }    }; })();

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