jQuery无刷新上传之uploadify简单试用

转载 2013年12月05日 13:26:10

1.ASP.NET工作笔记之一:图片上传预览及无刷新上传

2.SWFUpload实现了无刷新上传的功能
3.IFRAME方法。

Flash带预览图片批量上传(后台asp.net)

2从官网下载开发包添加到项目中,我对这个开发包做了一个精简,删去了那些php方面的文件:

项目基本结构:

二:添加对css和js文件的引用:

注意jquery.js文件和uploadify.js文件的调用顺序。

三:Default.aspx页面的代码如下:

 

复制代码
<head runat="server">
    <title></title>
    <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
        $(
function () {
            $(
"#uploadify").uploadify({
                
//指定swf文件
                'swf''js/uploadify/uploadify.swf',
                
//后台处理的页面
                'uploader''UploadHandler.ashx',
                
//按钮显示的文字
                'buttonText''上传图片',
                
//显示的高度和宽度,默认 height 30;width 120
                //'height': 15,
                //'width': 80,
                //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc''Image Files',
                
//允许上传的文件后缀
                'fileTypeExts''*.gif; *.jpg; *.png',
                
//发送给后台的其他参数通过formData指定
                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
                //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                //'queueID': 'fileQueue',
                //选择文件后自动上传
                'auto'true,
                
//设置为true将允许多文件上传
                'multi'true
            });
        });
    
    
</script>
</head>
<body>
    <div>
        <%--用来作为文件队列区域--%>
        <div id="fileQueue">
        </div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
            <href="javascript:$('#uploadify').uploadify('upload')">上传</a>
            <href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
        </p>
    </div>
</body>
</html>
复制代码

四:一般处理程序UploadHandler.ashx简单代码如下:

 

复制代码
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //http://www.cnblogs.com/babycool/
            //接收上传后的文件
            HttpPostedFile file = context.Request.Files["Filedata"];
            //其他参数
            
//string somekey = context.Request["someKey"];
            
//string other = context.Request["someOtherKey"];
            
//获取文件的保存路径
            string uploadPath =
                HttpContext.Current.Server.MapPath("UploadImages" + "\\");
            //判断上传的文件是否为空
            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                //保存文件
                file.SaveAs(uploadPath + file.FileName);
               context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }  

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
复制代码

五:用到的参数介绍:

通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档可得知:

 

参数不重新指定则保持默认:

swf:uploadify.swf 文件的相对路径

uploader:后台处理程序的相对路径

buttonText:按钮显示的文字

上传文件的类型默认为所有文件  'All Files'    '*.*'

可以通过以下两参数指定,指定方法见步骤三中的代码:

fileTypeDesc;fileTypeExts;

auto:为true表示选择文件后自动上传;如果不想自动上传,需设定为false,并通过

1 <href="javascript:$('#uploadify').uploadify('upload')">上传</a>
2 <href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>

来指定是上传还是取消上传;

multi:设置为true将允许多文件上传;

method: 提交方式Post 或Get 默认为Post;

queueSizeLimit:当允许多文件上传时,设置选择文件的个数,默认值为999 ;

另外,取消上传图片的路径是设置在css文件中的;

其他更多设置可以参考官网的帮助文档。

六:将上传完成后显示的Complete显示为中文

一位园友提出“

英文的Complete不能改成中文”,这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容:

 

再参考官方的帮助文档,可以得知,在“

onUploadSuccess” 事件中可以设置上传完成后所执行的代码,则修改后的代码为:

 

复制代码
                //选择文件后自动上传
                'auto': true,
                //设置为true将允许多文件上传
                'multi': true,
                //上传成功后执行
                'onUploadSuccess': function (file, data, response) {
                    $('#' + file.id).find('.data').html(' 上传完毕');
复制代码

                } 

 

还有一个需要注意的一点是:一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件,则除了指定fileTypeDesc;fileTypeExts;两个参数外,还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断,以防一些用户跳过客户端验证上传恶意文件。

下面附上我在博客园找到的那两篇介绍uploadify的文章链接,供大家参考:

JQuery上传插件Uploadify使用详解

利用插件uploadify完成ajax效果的图片上传

并附上uploadify的官方网站 

我整理的开发包:整理uploadify-v3.1.NET开发包

当然,这仅仅是一个简单的试用,具体用到项目中还要考虑很多方面的问题。

欢迎各位大神多多指教,如果该文章对你有帮助大家可以一起讨论讨论。

转载请注明出处。

 

jQuery无刷新上传之uploadify简单试用

先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章。前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了...

[.Net码农]jQuery无刷新上传之uploadify简单试用

http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html       先简单的侃两句:貌似已经有两个月的时间没有...

jQuery无刷新上传之uploadify简单试用

uploadify

JQuery上传插件Uploadify的简单使用

在开发 web程序的时候,上传附件或是照片这是常有的事件,以前一直在使用swfupload,后来发现了Jquery的Uploadify感觉不错,就试了一下,这里做一个记录。以备使用。        ...

JQuery插件 - Uploadify (简单易用的上传插件)配置详解

·概述 Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站。 它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手。 官...

JQuery插件 - Uploadify (简单易用的上传插件)

·概述 Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站。 它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手。 ...

jQuery上传插件Uploadify 3.2.1 简单例子

1、导入CSS和JS文件

jquery uploadify简单图片上传

1.先下载uploadify包(官网地址:)

JQuery插件 - Uploadify (简单易用的上传插件)

Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站。   它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手。   官方网...

jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击

以前用的是版本2.1.4,这次看见更新后就尝试了一下,发现有很多改变。 首先引入 js 和 css link rel="stylesheet" href="uploadify....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery无刷新上传之uploadify简单试用
举报原因:
原因补充:

(最多只允许输入30个字)