Plupload一个很好用的上传组件
发表时间： 2017-04-01 11:57:49 | 浏览次数：
小编分享一个好用的上传组件Plupload
先看看Plupload的功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用Html5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。
一个简单的demo：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Events example</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plupload.full.min.js"></script>
</head>
<body style="font: 13px Verdana; background: #eee; color: #333">
<h1>Plupload Events example</h1>
<div id="container">
<a id="uploadAvatar" href="javascript:;">[上传文件]</a>
</div>
<br />
<div id="avatar"></div>
<script type="text/javascript">
var uploader = new plupload.Uploader({
browse_button : 'uploadAvatar',
url : 'http://localhost/plupload/demo/function_upload.php',
flash_swf_url : 'js/plupload/Moxie.swf',
silverlight_xap_url : 'js/plupload/Moxie.xap',
filters: {
mime_types : [{ title : "图片文件", extensions : "jpg,jpeg,gif,png,bmp" }],
max_file_size : '1024kb',
prevent_duplicates : true
}
});
uploader.init();
//绑定文件添加进队列事件
uploader.bind('FilesAdded',function(uploader,files){
uploader.start();
});
//绑定文件上传进度事件
uploader.bind('UploadProgress',function(uploader,file){
$('#uploadAvatar').text(file.percent + '%上传中...');//控制进度条
});
//绑定文件上传完成事件
uploader.bind('FileUploaded',function(up, file, info){
var rpObj = eval("(" + info.response + ")");
$("#avatar").text(rpObj.url);
$('#uploadAvatar').text('重新上传');
});
//绑定文件上传错误事件
uploader.bind('Error',function(up, err){
if(err.code == -601){alert("文件格式有误！");}else if(err.code == -600){alert("上传文件过大！");}else{alert("上传失败，请重新上传！");}
});
</script>
</body>
</html>
帮助文档：文件上传插件文档PluploadDoc
demo下载：demo.zip
上一篇：JS 正则表达式，验证表单
下一篇：JQuery判断checkbox\radio是否选中，及选中的值