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处理程序(c#)
<%@ 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文件