所属分类：web前端开发
AjaxUpLoad.js的使用实现无刷新文件上传，如图。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
图1 文件上传前
图2 文件上传后
1、创建页面并编写HTML
上传文档:
微博登录
QQ登录123456 <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>
登录后复制上传图片:
123456 <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文件
1 <script src="/js/common/AjaxUpload.js" type="text/javascript"></script>
登录后复制3、编写JS脚本
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 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处理程序
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 <%@ 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样式
12345 /*上传文件*/.uploadFile{margin-bottom:10px;} /*上传图片*/.uploadImg{} .uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}
登录后复制附件2：AjaxUpload.js文件
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688 /** * 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 * * @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 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(); } }; })();
登录后复制相信看了本文案例你已经掌握了方法，更多精彩请关注zzsucai.com其它相关文章！
推荐阅读：
jQuery怎么实现左右滑动的toggle
在Vuejs里利用index对第一项添加class的方法
以上就是AjaxUpLoad.js怎么实现文件上传的详细内容，更多请关注zzsucai.com其它相关文章！
