AjaxUpLoad.js的使用实现无刷新文件上传，如图。

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML

上传文档:

<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>

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 () { /** * 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://plete event when ready this._getResponse(iframe, file); // get ready for next request this._createInput(); } }; })();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。