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无刷新上传控件的更多相关文章

  1. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  2. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  3. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  4. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  5. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  6. 适应各浏览器图片裁剪无刷新上传jQuery插件(转)

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  7. jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  8. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...

  9. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

随机推荐

  1. T-SQL技巧收集——拆分字符串

    原文:T-SQL技巧收集--拆分字符串 在开发中,很多时候都需要处理拆分字符串的操作.下面收集了几种方法供大家分享,其中的逗号可以改为多种有需要的符号,但是不能针对多种符号同时存在的例子.有待各位补充 ...

  2. RFC 协议下载方法

    rfc官方网站:http://tools.ietf.org 举例说明: RFC7230是HTTP 1.1协议,此文档的URL为:http://tools.ietf.org/html/rfc7230 你 ...

  3. GPU 编程入门到精通(五)之 GPU 程序优化进阶

    博主因为工作其中的须要,開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识.鉴于之前没有接触过 GPU 编程.因此在这里特地学习一下 GPU 上面的编程. 有志同道合的小伙 ...

  4. python使用smtplib库和smtp.qq.com邮件服务器发送邮件(转)

    使用qq的邮件服务器需要注意的两个地方主要是: 1.协议问题 使用465端口 SSL 协议 2.口令问题 出现SMTPAuthenticationError 主要的原因就是口令和帐号信息不对,这里我们 ...

  5. c#左右socket连接超时控制方案

    之前有一个项目中使用Remoting技术.当远程地址无效或server不执行,访问远程对象的方法,它会经过几十秒的时间来抛出异常秒. 由于我使用tcp状态.因此,认为可以使用socket为了测试连接, ...

  6. POJ 2431 Expedition (贪心+优先队列)

    题目地址:POJ 2431 将路过的加油站的加油量放到一个优先队列里,每次当油量不够时,就一直加队列里油量最大的直到能够到达下一站为止. 代码例如以下: #include <iostream&g ...

  7. (插播)unity的 异常捕捉和 ios Android 崩溃信息的捕捉。

    近期 做些准备性得工作和有意思的事情.所以近期做了一个适合ios和android 错误信息捕捉的unity插件. 两个功能,app崩溃也就是闪退 是开发人员 非常头疼的一件事,还有就是一些莫名得错误 ...

  8. 【C++ Primer每天刷牙】一间 迭代器

    迭代器的介绍 概述 迭代器是一种检查容器内元素并遍历元素的数据类型. 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或所有元素,每一个迭代器对象代表容器中的确定的地址.迭代 ...

  9. 2014年辛星Javascript解读第四节 流程控制语句

    上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于不论什么一门编程语言来说,流程控制都是很重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******* ...

  10. TCP/IP 网络编程(六)

    流程模型: 线程模型: 线程的创建和运行流程 #include <pthread.h> int pthread_create(pthread_t * restrict thread, co ...