网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 jQuery插件ajaxfileupload.js实现上传文件
范文
    这篇文章主要介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料,感兴趣的小伙伴们可以参考一下
    AjaxUpLoad.js的使用实现无刷新文件上传，如图
    名单
    1、创建页面并编写HTML
    上传文档:  
    <div> 
      <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> 
      <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文件
    <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?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 ? 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(); 
        } 
      }; 
    })(); 
    以上就是为大家介绍的ajaxfileupload.js实现上传文件的简单小例子，希望大家喜欢。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 7:53:13