jQuery插件ajaxfileupload.js实现上传文件

作者：lishuangzhe7047 字体：[增加减小] 来源：互联网

lishuangzhe7047 通过本文主要向大家介绍了jQuery,插件,ajaxfileupload.js,上传文件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

jQuery插件ajaxfileupload.js实现上传文件

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容