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/