版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhouchenxuan/article/details/74161059
最近在做项目的时候发现了一个前端的上传组件——plupload,用起来非常nice,工作之余自己试着学习了下。但是发现官网或者博客上的教程不是很到位,于是就自己总结了一下。
现在把配置分享给大家~
先放个效果图
这个插件功能多强大,外观多漂亮,这里就不再赘述了,网上一大堆,下面我把代码贴上。
- 1、先引入js和css(注意引入顺序)
<!-- 1、先引入jQuery -->
<script type="text/javascript" src="${ctx }/js/jquery.min.js"></script>
<!-- 2、引入css -->
<link type="text/css" rel="stylesheet" href="${ctx }/js/jquery.plupload.queue/css/jquery.plupload.queue.css">
<!-- 3、引入plupload.full.min.js -->
<script type="text/javascript" src="${ctx }/js/plupload.full.min.js"></script>
<!-- 4、引入jQuery.plupload.queue.js -->
<script type="text/javascript" src="${ctx }/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!-- 5、引入cn.js(或者zh_CN.js) -->
<script type="text/javascript" src="${ctx }/js/i18n/zh_CN.js"></script>
这里忘了放上js的资源列表,马上补上。
- 2、接着写html代码(只有一个div,so easy)
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
- 3、然后是JS初始化方法与调用。(url大家根据自己实际情况来写。我们这里只讨论前台插件,后台上传代码又是一项技术了,大家可以自行百度一下。。。)
$(function() {
//实例化
$("#uploader").pluploadQueue({
//用来指定上传方式,有顺序
runtimes : 'html5,flash,silverlight,html4',
url : '${ctx }/UploadServlet',
//分片上传文件时,每个文件大小
chunk_size: '200kb',
//点击标题时,是否可以重命名
rename : true,
//是否支持拖拽上传
dragdrop: true,
filters : {
// 最大文件大小
max_file_size : '10mb',
// 支持上传格式
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"},
{title : 'Jsp files',extensions : "jsp"}
]
},
// 对将要上传的图片进行压缩
resize : {width : 320, height : 240, quality : 90},
// 当需要使用swf方式进行上传时需要配置该参数
flash_swf_url : '${ctx }/js/Moxie.swf',
// 当需要使用silverlight方式进行上传时需要配置该参数
silverlight_xap_url : '${ctx }/js/Moxie.xap'
});
});
大功告成,试一试吧,100%可以用。
接下来附上一点资源。。。
plupload官网:http://www.plupload.com/
大牛写的技术指南: http://www.cnblogs.com/2050/p/3913184.html
大牛写的其他demo: http://chaping.github.io/plupload/demo/