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
Upload无刷新上传控件的更多相关文章
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- ajax 无刷新上传
最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 适应各浏览器图片裁剪无刷新上传jQuery插件(转)
看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...
- jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- js实现无刷新上传
在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
随机推荐
- HDU 1596 find the safest road (最短路)
find the safest road Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- tomcatserver乱码问题,tomcat与数据库之间的编码统一转换
在tomcat文件夹的conf文件夹下,改动server.xml文件,在以下截图中的位置加上URIEncoding="UTF-8"则表示tomcat编码转换为utf-8风格, 一般 ...
- Android:抄QQ照片选择器(按相册类别显示,加入选择题)
这个例子的目的是为了实现类似至QQ照片选择功能.选择照片后,,使用类似新浪微博 微博 页面上显示. 先上效果图: 本例中使用的主要技术: 1.使用ContentProvider读取SD卡全部图 ...
- linux中fork()函数具体解释(原创!!实例解说)
一.fork入门知识 一个进程,包含代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程差点儿全然同样的进程,也就是两个进程能够做全然同样的事,但假设初始參数或者传入的变量不 ...
- JAVA web四个属性的范围汇总
首先,你需要知道client跳跃和server差别: client跳转: response.sendRedict(String path),地址栏发生改变. 不能传递request属性. server ...
- HDU 4085 Steiner树模板称号
Dig The Wells Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- oracle11g ASM(修复损坏的磁盘组头asm修复2)
--编KFED [oracle@rac2 lib]$cd $ORACLE_HOME/rdbms/lib [oracle@rac2 lib]$ pwd /u01/app/oracle/product/1 ...
- Android fragment onActivityResult 不起作用
fragment 跳转至Acivity后,fragment里面的onActivityResult 被被调用 试过非常多办法,最后getactivity().startactivityforresult ...
- 设计模式之享元模式(Flyweight)摘录
23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...
- asp.net学习之 数据绑定控件--List数据绑定控件
原文:asp.net学习之 数据绑定控件--List数据绑定控件 List控件(如 CheckBoxList.DropDownList.ListBox 和 RadioButtonList 类)继承自L ...