前端上传组件Plupload常见用法总结

作者: admin 日期: 2015-07-15 19:26:40 人气: - 评论: 0

1 引用文件

<!-- 首先需要引入plupload的源代码 -->

    <script src="js/plupload.full.min.js"></script>

引入一个js文件就可以了

 

 

2 初始化插件

 

               //实例化一个plupload上传对象

               var uploader = newplupload.Uploader({

                   browse_button : 'button', //触发文件选择对话框的按钮,为那个元素id

                   url : 'upload.php', //服务器端的上传页面地址

                   flash_swf_url : '__JS__/plupload/Moxie.swf',//swf文件,当需要使用swf方式进行上传时需要配置该参数

                   silverlight_xap_url : '__JS__/plupload/Moxie.xap'//silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数

               });

 

               //在实例对象上调用init()方法进行初始化

               uploader.init();

初始化的时候可以指定上传方式,建议不要指定让插件根据浏览器自动选择

 

 

3 函数绑定

 

         通过绑定相关的函数我们能够获取控件的工作情况同时更新Ui

 

3.1 选择好文件事件

uploader.bind('FilesAdded', function(uploader, files) {

                   for (vari in files ) {

                        console.log(files[i]);

                   }

uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法

 

                   //每个事件监听函数都会传入一些很有用的参数,

                   //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作

                });

 

 

'FilesAdded'这个事件在选择好文件之后会触发一般这个事件出发的时候就可以接着开始上传了,我随便选择了一些文件控制台输出如下:

 


3.2 上传进度事件

uploader.bind('UploadProgress', function(uploader, file) {

                   console.log("文件大小:"+file.size+ "字节/文件已经上传"+file.loaded+"字节");

                });

 

 

控制台如下:


 

3.4 文件上传完毕事件

 

uploader.bind('FileUploaded', function(uploader, file, responseObject) {

                   var data = eval('('+ responseObject.response + ')');

                   var filename= data.path + data.img

                });

 

文件上传完毕就调用这个事件,服务器会返回图片在服务端的路径



控件下载地址:http://www.codestorm.cn/webftp/data/nfs/B/Code/plupload-2.1.7.zip

相关内容

发表评论
更多 网友评论0 条评论)
暂无评论

Copyright © 2012-2014 我的代码板 Inc. 保留所有权利。

页面耗时0.0260秒, 内存占用1.87 MB, 访问数据库15次

闽ICP备15009223号-1