Upload无刷新上传控件

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