Upload无刷新上传控件
最近在做一个web开发项目 ,用到upload上传控件 ,由于c#提供的控件局限性太大 ,所以就自己从国外大牛 手里借鉴一下.
该控件可以判断上传的文件是否已存在 ,减少了服务器压力,提供了很好的用户体检.裉据测试此控件可以很好的兼容MVC WebFrom 中.
1 public ActionResult Upload(HttpPostedFileBase Filedata)
2 {
3 // 没有文件上传，直接返回
4 if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0)
5 {
6 return HttpNotFound();
7 }
8
9 //获取文件完整文件名(包含绝对路径)
10 //文件存放路径格式：/files/upload/{日期}/{md5}.{后缀名}
11 //例如：/files/upload/20130913/43CA215D947F8C1F1DDFCED383C4D706.jpg
12 string fileMD5 = GetMD5HashFromStream(Filedata.InputStream);
13 string FileEextension = Path.GetExtension(Filedata.FileName);
14 string uploadDate = DateTime.Now.ToString("yyyyMMdd");
15
16 string imgType = Request["imgType"];
17 string virtualPath = "/";
18 if (imgType == "normal")
19 {
20 virtualPath = string.Format("~/files/upload/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
21 }
22 else
23 {
24 virtualPath = string.Format("~/files/upload2/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
25 }
26 string fullFileName = this.Server.MapPath(virtualPath);
27
28 //创建文件夹，保存文件
29 string path = Path.GetDirectoryName(fullFileName);
30 Directory.CreateDirectory(path);
31 if (!System.IO.File.Exists(fullFileName))
32 {
33 Filedata.SaveAs(fullFileName);
34 }
35
36 var data = new { imgtype = imgType, imgpath = virtualPath.Remove(0, 1) };
37 return Json(data, JsonRequestBehavior.AllowGet);
38 }
39
40 private static string GetMD5HashFromStream(Stream stream)
41 {
42 try
43 {
44 System.Security.Cryptography.MD5 md5 = new System.Security.Cryptography.MD5CryptoServiceProvider();
45 byte[] retVal = md5.ComputeHash(stream);
46 StringBuilder sb = new StringBuilder();
47 for (int i = 0; i < retVal.Length; i++)
48 {
49 sb.Append(retVal[i].ToString("X2"));
50 }
51 return sb.ToString();
52 }
53 catch (Exception ex)
54 {
55 return string.Empty;
56 }
57 }
58 }
上面的包含的两个方法 ,就是该控件后台实现方法 ,是不是很简单呢 ???
其中
GetMD5HashFromStream()提供对上传文件MD5加密,以此判断服务器中是否存在该文件
下面我来看下在view页面怎么实现的??
1 @{
2 ViewBag.Title = "Index";
3 Layout = "~/Views/Shared/_Layout.cshtml";
4 }
5
6 <link href="~/Uploadify/uploadify.css" rel="stylesheet" type="text/css" />
7 <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
8 <script src="~/Uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
9 <h2>Index</h2>
10 <p></p>
11 <p></p>
12 <p></p>
13 <p></p>
14 <img src="" id="uploadimg" />
15
16 <span id="btn_upload"></span>
17 <script type="text/javascript">
18 $(function () {
19 $('#btn_upload').uploadify({
20 uploader: '/Home/Upload', // 服务器处理地址
21 swf: '/Uploadify/uploadify.swf',
22 buttonText: "选择文件", //按钮文字
23 height: 34, //按钮高度
24 82, //按钮宽度
25 fileTypeExts: "*.jpg;*.png;*.exe;", //允许的文件类型
26 fileTypeDesc: "请选择图片文件", //文件说明
27 formData: { "imgType": "normal" }, //提交给服务器端的参数
28 onUploadSuccess: function (file, data, response) { //一个文件上传成功后的响应事件处理
29 var data = $.parseJSON(data);
30 $('#uploadimg').attr('src', data.imgpath);
31 alert(data.imgpath);
32 }
33 });
34 });
35 </script>
是不是很简单呢 ??
其中要在加载两个JS文件 和一个Css样式表.
到此控件配置结束
demo地址:cu.nj02.dl2.baidupcs.com/file/1dc213c64c63615f6df8a44e258febc0?bkt=p2-nj-295&fid=1225720976-250528-218974559079752&time=1418386490&sign=FDTAXERLB-DCb740ccc5511e5e8fedcff06b081203-LcpH9m5sDAEH1ttRRAA7K6FDNzw%3D&to=ncp&fm=Nan,B,U,nc&newver=1&newfm=1&flow_ver=3&sl=81723464&expires=8h&rt=pr&r=532838191&mlogid=2584517802&vuk=1225720976&vbdid=2378542920&fin=UploadFileTest.rar&fn=UploadFileTest.rar