JQUERY Uploadify 3.1 C#使用案例

　　近来因为要做一个上传功能，而firefox又不能直接使用file这样的标签，所以试着用js来写了一个，结果发现代码太多，验证太复杂，而且效果也不理想。

　　相对的，jquery提供的这一套uploadify则相当好用，但是官方只提供了php版本的，表示有点遗憾，可是没关系，c#同样可以使用。下面写一个小的Demo，也是担心自己会忘记，在这做一个记录吧

　　首先下载 uploadify3.1

　　我们先写个html页面

　　

 1 <body>
 2 <div>
 3     <div id="fileQueue"></div>
 4     <input type="file" name="uploadify" id='uploadify' value=""  />
 5     <p>
 6         <a href="javascript:$('#uploadify').uploadify('upload')">Start</a>
 7         <a href="javascript:$('#uploadify').uploadify('cancel')">Cancel</a>
 8     </p>
 9 </div>
10 </body>
View Code

ok，页面完成之后，下面就是前奏了，我们需要导入相应的js和css样式，以及uploadify各参数的定义了，下面我们就来完成js的页面

 1  <script src="JS/jquery-1.8.0.js" type="text/javascript"></script>
 2     <link href="JS/uploadify.css" rel="stylesheet" type="text/css" />
 3     <script src="JS/jquery.uploadify-3.1.js" type="text/javascript"></script>
 4 <script>
 5     $(function () {
 6     $("#uploadify").uploadify({
 7         //上传false
 8         'swf': 'JS/uploadify.swf',
 9         //后台业务处理
10         'uploader': 'UploadHandler.ashx',
11         //按钮
12         'buttonText': 'Upload Image',
13         //设置宽高
14         'height': 15,
15         'width': 80,
16         'All Files': '*.*',
17         //在浏览窗口底部的文件类型下拉菜单中显示的文本
18         'fileTypeDesc': 'Image Files',
19         'fileTypeExts': '*.gif;*.jpg;*.png',
20         'size': '5120KB',
21         //设置是否自动上传，选择完成后自动上传，这里我并没有自动上传
22         'auto': false,
23         //设置是否可以上传多个文件
24         'multi': false,
25         //上传成功后所执行的代码
26         'onUploadSuccess': function (file, data, response) {
27             $("#" + file.id).find('.data').html('上传完毕');
28         },
29         //上传失败时所执行的代码
30         'onUploadError': function (file, data, response) {
31             $('#' + file.id).find('.data').html('文件过大');
32         },
33         //开始上传时所执行的代码
34         'onUploadStart': function (file) {
35             alert("start");
36             alert(file.name);
37         }
38     });
39 });
40 </script>
View Code

这里完成之后，我们就只差最后一步了，就是后台业务的处理，asp.net一般结合handler来使用，所以我们先创建一个uploadhandler.ashx文件

 1     context.Response.ContentType = "text/plain";
 2             context.Response.Write("Hello World");
 3             HttpPostedFile file = context.Request.Files["Filedata"];
 4             //获取保存路径
 5             string uploadPath =
 6                 HttpContext.Current.Server.MapPath("UploadImages" + "\\");
 7             //判断文件是否为空
 8             if (file != null)
 9             {
10                 if (!Directory.Exists(uploadPath))
11                 {
12                     Directory.CreateDirectory(uploadPath);
13                 }
14                 //Save File
15                 file.SaveAs(uploadPath + file.FileName);
16                 //这里的返回值比较重要，1表示正确，0则是失败，成功后，会继续上传下一个文件
17                 context.Response.Write("1");
18             }
19             else {
20                 context.Response.Write("0");
21             }
View Code

说到这，功能便已经完成了，我发下我的文件结构图

点击这里下载uploadify 3.1

好，暂时就这些了，也是刚刚接触这个，其他的还在研究中

 

posted on 2013-07-03 17:54  源坊  阅读(1948)  评论(0)  编辑  收藏  举报

导航