这篇文章主要介绍了 jQuery Plupload上传插件的使用详解,需要的朋友可以参考下
因为Plupload可配置参数比较多,所以这里讲解最常用的,结合jquery-ui展示的界面!如下:
Plupload默认支持html5,flash,silverlight,html4,四种上传方式,按照顺序进行加载,如果浏览器不支持html5则会选择flash...到最后html4,
如果不需要某种上传方式,在配置里面不写即可!
直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <body>
<p id= "uploader" >
<p>Your browser doesn& #39;t have Flash, Silverlight or HTML5 support.</p>
</p>
<script type= "text/javascript" >
$( function (){
$( "#uploader" ).plupload({
runtimes: & #39;html5,flash,silverlight,html4',//这里可以不写,plupload默认支持
url: "UploadPhotoServlet" ,
max_file_size: & #39;1000mb',//用来限制单个文件大小的
multi_selection: true ,
chunk_size: & #39;0',//是否将上传文件进行分片,0代表是不分
//允许多队列文件进行重命名
views: {
list: true ,
thumbs: true ,
active: & #39;thumbs'
},
flash_swf_url : & #39;plupload/js/Moxie.swf',
silverlight_xap_url : & #39;plupload/js/Moxie.xap'
});
})
</script>
</body>
|
登录后复制
在官方文档有这样一句话
也就是说,UI.Plupload 需要jquery-ui的支持,我选的是这个
完整的 引入文件是
1 2 3 4 5 6 7 8 9 10 11 | <head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<script type= "text/javascript" src= "plupload/js/jquery.js" ></script>
<script type= "text/javascript" src= "plupload/js/jqueryui/jquery-ui.min.js" ></script>
<link rel= "stylesheet" href= "plupload/js/jqueryui/jquery-ui.min.css" rel= "external nofollow" />
<script type= "text/javascript" src= "plupload/js/plupload.full.min.js" ></script>
<script type= "text/javascript" src= "plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js" ></script>
<script type= "text/javascript" src= "plupload/js/i18n/zh_CN.js" ></script>
<link rel= "stylesheet" type= "text/css" href= "plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" rel= "external nofollow" />
<title>plupload</title>
</head>
|
登录后复制
常见问题:
1、如果你发现点击 选择文件 按钮,弹出文件框特别慢,那么将,过滤文件代码去掉即可!根据具体情况,自己设置
1 2 3 4 5 6 7 8 | filters: {
mime_types : [
{ title : "Image files" , extensions : "jpg,gif,png" },
{ title : "Zip files" , extensions : "zip" }
],
max_file_size : & #39;400kb', //最大只能上传400kb的文件
prevent_duplicates : true
}
|
登录后复制
可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入,它包括三个属性:mime_types:用来限定上传文件的类型,为一个数组,该数组的每个元素又是一个对象,该对象有title和extensions两个属性,title为该过滤器的名称,extensions为文件扩展名,有多个时用逗号隔开。该属性默认为一个空数组,即不做限制。
max_file_size:用来限定上传文件的大小,如果文件体积超过了该值,则不能被选取。值可以为一个数字,单位为b,也可以是一个字符串,由数字和单位组成,如'200kb'
prevent_duplicates:是否允许选取重复的文件,为true时表示不允许,为false时表示允许,默认为false。如果两个文件的文件名和大小都相同,则会被认为是重复的文件
2、如果后台使用是的是文件域名称接收文件,并且附加有额外参数
需要额外设置两个参数
1 2 3 4 5 6 7 8 9 10 | file_data_name: "uploadFile" ,
multipart_params:{
"prefixName" : "magazine"
},
|
登录后复制
3、在和easyui,extjs等UI库进行整合时候,引入Plupload的文件一定要在easyui的引入文件之前,否则easyui会出现一些莫名奇妙的错误!
ok,到这里基本完成Plupload的使用。
以上是对jQuery Plupload上传插件的基本介绍的详细内容。更多信息请关注PHP中文网其他相关文章!