现在位置首页 / 前端开发 /正文

asp.net服务端+JQuery上传插件Uploadify使用详解

作者: IT小兵 | 2014年3月27日| 热度:℃ | 评论: |参与:

系统中支持文件的上传和下载是很正常的事情,今天分享一下jquery.uploadify,一个jquery的上传组件。

服务端采用asp.net作为文件处理服务。

下载的控件可以参考:

[Jquery 下载插件jDownload--弹出框提示文件信息及下载(支持asp.net)---介绍]

[Jquery 下载插件jDownload--弹出框提示文件信息及下载(支持asp.net)---代码]

[Jquery文件下载及展示UI辅助插件--Downloadr(基于FaceBox)使用说明及代码示例]

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。

不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

JQuery uploadify官方下载 http://www.uploadify.com/download/ 

JQuery uploadify官方文档 http://www.uploadify.com/documentation/ 

JQuery uploadify官方演示 http://www.uploadify.com/demos/ 



首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹,用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

 

参考网站:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html 

实例代码:

 $("#file_upload").uploadify({
            'swf': '../../JavaScript/Jquery-UploadFile/uploadify.swf',
            'uploader': '../../UploadHandler.ashx',
            'fileTypeDesc': '图片文件',
            'fileTypeExts': '*.gif; *.jpg; *.png',
            'height': 50,
            buttonText: '选择文件...',
            'onUploadComplete': function (file) {
                alert('文件:' + file.name + ' 上传成功.');
                Filename = file.name;
                $.colorbox.close();
            }
        });

jquery.uploadify参数说明:

uploader:服务端地址

swf:使用上传的swf相对路径


'cancelImg' : 'img/uploadify-cancel.png',  

'folder' : 'uploads',//您想将文件保存到的路径  

'queueID' : 'fileQueue',//与下面的id对应  

'queueSizeLimit' : 5,  

'fileDesc' : 'rar文件或zip文件',  

'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc  

'auto' : false,  

'multi' : true,  

'simUploadLimit' : 2,  

'buttonText' : '选择文件',  

'onDialogOpen' :  //当选择文件对话框打开时触发  

onSelect:当每个文件添加至队列后触发  

onSelectError:/当文件选定发生错误时触发 

onDialogClose:当文件选择对话框关闭时触发

onQueueComplete:当队列中的所有文件全部完成上传时触发  

onUploadComplete:队列中的每个文件上传完成时触发一次  

onUploadError:上传文件出错是触发(每个出错文件触发一次)

onUploadProgress:上传进度发生变更时触发   

onUploadStart:上传开始时触发(每个文件触发一次)  

onUploadSuccess:上传完成时触发(每个文件触发一次)  


aspx服务端代码:创建个文件ashx.

 public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\UploadFile\\";
            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
                context.htm = htm&("1");
            }
            else
            {
                context.htm = htm&("0");
            }
        }

转发注明:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询