ajax页面 js文件上传,jQuery插件ajaxfileupload.js实现上传文件

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

1、创建页面并编写HTML

上传文档:

上传图片:

2、引用AjaxUpload.js文件

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="" + response + "";

}

}

});

}

//图片上传

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 = "";

}

//删除图片

function DelImg(img, hidPut) {

hidPut.value = "";

img.src = "/images/nophoto.gif";

}

4、创建/Common/UploadHandler.ashx处理程序

using System;

using System.Web;

using System.Text.RegularExpressions;

using System.IO;

public class UploadHandler : IHttpHandler {

private string _filedir = ""; //文件目录

///

/// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)

///

///

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文件上传失败

}

}

///

/// 文档上传

///

///

///

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