jquery 文件上传插件Uploadify 初探

最近使用了uploadify做文件上传,同时显示上传进度,感觉简单方便,功能也叫完善,先记下来再说。

官方地址 http://www.uploadify.com/ 

提供了html5的版本和Flash的版本,html5的版本收费,所以使用的Flash版本,你懂的。。。

先来看下我的代码,看看uploadify使用有多简单、方便。。。

将下载的uploadify.zip解压,


这个文件需要在页面引用,当然jquery是肯定不能少了,如下是文件上传的html页面:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>Uploadify</title>

    <link href="/js/jquery.uploadify-v2.1.0/uploadify.css"     rel="stylesheet"type="text/css" ></link>

 

 <script src="/js/jquery-1.9.1.min.js"></script>

 

   <script type="text/javascript"

     src="/js/jquery.uploadify-v2.1.0/swfobject.js"></script>

 

   <script type="text/javascript"

   src="/js/jquery.uploadify-v2.1.0/jquery.uploadify.js"></script>

 

   <script type="text/javascript">

        $(document).ready(function()

        {

            $("#uploadify").uploadify({

            'auto'     : false,//不自动上传

            'multi':false,//不支持多文件上传

                'uploader': '/uploadify',//文件上传地址,对应后台服务器的接受地址

                'swf':'/js/jquery.uploadify-v2.1.0/uploadify.swf',//这个是Flash的文件选择插件

                //上传成功后执行的方法

                'onUploadSuccess':function(file,data,response){

                alert(response);

                alert(data);

                }

            });

        }); 

   </script>

 

</head>

<body>

 <!--  <div id="fileQueue"></div> -->

   <input type="file" name="uploadify"id="uploadify" />

    <p>

     <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|

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

   </p>

</body>

</html>

 

简单吧,只需要在页面有个file类型的input标签,在调用uploadify,就完事,uploadify就可以正常工作了。

现在我们来看看几个基本的参数都是什么意思:

auto   是否自动上传,自动上传是指选择文件后,必须要点上传按钮了

multi   是否可以同时选择多个文件

uploader  文件上传地址

swf   Flash插件地址

onUploadSuccess 上传成功后执行的方法,其中data为服务器返回的数据

 

更多配置请参见   http://www.uploadify.com/documentation/ 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值