这次给大家带来ajaxfileupload.js实现文件上传（附步骤代码），ajaxfileupload.js实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。
ajaxupload.js的使用实现无刷新文件上传，如图
1、创建页面并编写html上传文档:
<p 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="删除" /> </p>
上传图片:
<p 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="删除" /> </p>
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 p = document.createelement('p'); return function (html) { p.innerhtml = html; var el = p.firstchild; return p.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 * <p><input type='file' /></p> */ _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 p = document.createelement(p); addstyles(p, { '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 (p.style.opacity !== 0) { if (typeof(p.filters) == 'undefined') { throw new error('opacity not supported by the browser'); } p.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'; }); p.appendchild(input); document.body.appendchild(p); 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 p = self._input.parentnode; copylayout(self._button, p); p.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 // p -> 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(); } }; })();
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+ajax实现文件上传（附代码）
jquery easyui插件怎么创建菜单链接按钮
以上就是ajaxfileupload.js实现文件上传（附步骤代码）的详细内容。