plupload一个前端上传组件

来源：互联网发布：中国社会发展数据库编辑：程序博客网时间：2024/06/05 02:04

官网：https://github.com/moxiecode/plupload

中文文档：http://www.cnblogs.com/2050/p/3913184.html

直接上干货

<!doctype html><html><head><meta charset="utf-8"><title>plupload前端上传插件</title></head><!-- include libraries(jQuery, bootstrap) --><script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js"></script> <script type="text/javascript" src="__ROOT__/Public/js/bootstrap.min.js"></script><link rel="stylesheet" href="__ROOT__/Public/css/bootstrap.min.css" /><script src="__ROOT__/Public/plugins/plupload/js/plupload.full.min.js"></script><body><!-- 这里我们只使用最基本的html结构：一个选择文件的按钮，一个开始上传文件的按钮(甚至该按钮也可以不要) -->    <p>        <button id="browse">选择文件</button>        <button id="start_upload">开始上传</button>    </p>    <script>    //实例化一个plupload上传对象    var uploader = new plupload.Uploader({        browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id        url : "{:U('Test/upload')}", //服务器端的上传页面地址        flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数        silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数    });        //在实例对象上调用init()方法进行初始化    uploader.init();    //当文件添加到上传队列后触发    uploader.bind('FilesAdded',function(uploader,files){        uploader.start();    });//当队列中的某一个文件上传完成后触发uploader.bind('FileUploaded',function(uploader,file,responseObject){        //alert(responseObject.response);console.log(uploader);console.log(file);console.log(responseObject);    });//会在文件上传过程中不断触发，可以用此事件来显示上传进度    uploader.bind('UploadProgress',function(uploader,file){        //TODOalert('a');    });    //最后给"开始上传"按钮注册事件    document.getElementById('start_upload').onclick = function(){        uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法    }    </script></body></html>

0 0