AjaxUpLoad.js实现文件上传功能

<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 id="imgShow" src="/images/nophoto.gif" />   <input type="hidden" id="hidImgName" />   <input type="button" id="btnUploadImg" value="上传" />   <input type="button" id="btnDeleteImg" value="删除" /> </div> 

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

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"; } 

<%@ 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 } 

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

/**  * 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();     }   }; })();