您的位置：首页 > Web前端

plupload一个前端上传组件

2016-05-25 15:13 288 查看

官网：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){
//TODO
alert('a');
});

//最后给"开始上传"按钮注册事件
document.getElementById('start_upload').onclick = function(){
uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航