jQuery插件ajaxfileupload.js实现上传文件_

1、jQuery插件ajaxfileupload.js实现上传文件_ 这篇文章主要介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料,感爱好的小伙伴们可以参考一下 AjaxUpLoad.js的用法实现无刷新文件上传，如图 1、创建页面并编写HTML 上传文档: div class=uploadFile span id=docinput type=text disabled=disabled /span input type=hidden id=hidFileName / input type=button id=btnUploadFile value=上传 / inpu

2、t 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 2、引用AjaxUpload.js文件 script src=/js/common/AjaxUpload.js t

3、ype=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).oncli

4、ck = 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 = func

5、tion() 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=fi

6、le : 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) ale

7、rt(您上传的文档格式不对，请重新选择！); 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, interva

8、l; 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) aler

9、t(您上传的图片格式不对，请重新选择！); 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 /; /删除图片 functi

10、on 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 _fi

11、ledir = ; /文件名目 / 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.QueryStringfileType; /猎取上传文件类型 if (

12、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 con

13、text) int cout = context.Request.Files.Count; if (cout 0) HttpPostedFile hpf = context.Request.Files0; 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(fileEx

14、t) = -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() +

15、 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/p

16、aram / returns/returns private string UploadImg(HttpContext context) int cout = context.Request.Files.Count; if (cout 0) HttpPostedFile hpf = context.Request.Files0; if (hpf != null) string fileExt = Path.GetExtension(hpf.FileName).ToLower(); /只能上传文件，过滤不行上传的文件类型 string fileFilt = .gif|.jpg|.php|.jsp

17、|.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

18、.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 I

19、HttpHandler 成员 public bool IsReusable get throw new NotImplementedException(); #endregion 附件1：页面CSS样式 /*上传文件*/ .uploadFilemargin-bottom:10px; /*上传图片*/ .uploadImg .uploadImg imgwidth:102px; height:64px; border:1px solid #CCCCCC; display: block; 附件2：AjaxUpload.js文件 /* * AJAX Upload ( l * * param fn ca

20、llback 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 (l chunk

21、 * 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

22、 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 */ fun

23、ction 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 +

24、 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. */ w

25、indow.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 its selected autoSubmit: true, / The type of data that youre expecting back fro

26、m 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

27、, / 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

28、 / 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._settingsi = optionsi; / button isnt necessary a dom element if (button.jquery) / jQuery object was passed

29、button = button0; else if (typeof button = string) if (/#.*/.test(button) / If jQuery user passes #elementId dont break it button = button.slice(1); button = document.getElementById(button); if (!button | button.nodeType != 1) throw new Error(Please make sure that youre passing a valid element); if

30、(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 wont

31、 do anything this._disabled = false; / if the button was disabled before refresh if will remain / disabled in FireFox, lets fix it this.enable(); this._rerouteClicks(); ; / assigning methods to our class AjaxUtotype = setData: function (data) this._settings.data = data; , disable: function

32、() 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 pro

33、blem with Safari 4 / The problem is that the value of input doesnt 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._d

34、isabled = false; , /* * Creates invisible file input * that will hover above the button * divinput type=file /div */ _createInput: function () var self = this; var input = document.createElement(input); input.setAttribute(type, file); input.setAttribute(name, this._); addStyles(input, p

35、osition: 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:

36、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) = undef

37、ined) 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 =

38、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 () re

39、moveClass(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 doesnt change if it / has display none when user selects a file input.parentNode.style.visibility = hidden; ); div.appendChild(input); docu

40、ment.body.appendChild(div); this._input = input; , _clearInput: function () if (!this._input) return; / this._input.value = ; Doesnt work in IE6 removeNode(this._input.parentNode); this._input = null; this._createInput(); removeClass(this._button, this._settings.hoverClass); , /* * Function makes su

41、re 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.

42、_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 depend

43、s * 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 cant use getTime, because it sometimes return / same value in safari :( var

44、id = getUID(); / We cant use following code as the name attribute / wont 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 doesnt do any harm. iframe.setAttribute(id, id); iframe.style.display = none; document.body.appendChild(iframe); return iframe; , /* * Cr