AjaxUpLoad.js的使用实现无刷新文件上传，如图。
图1 文件上传前
图2 文件上传后
1、创建页面并编写HTML
上传文档:
<div> <span><input type="text" disabled="disabled" /></span> <input type="hidden" /> <input type="button" value="上传" /> <input type="button" value="删除" /> </div>
上传图片:
<div> <img src="https://www.jb51.net/images/nophoto.gif" /> <input type="hidden" /> <input type="button" value="上传" /> <input type="button" value="删除" /> </div>
2、引用AjaxUpload.js文件
<script src="https://www.jb51.net/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 = "https://www.jb51.net/images/nophoto.gif"; }
4、创建/Common/UploadHandler.ashx处理程序
<%@ WebHandler Language="C#" %> 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></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></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></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文件