宜宾网站建设公司

如何在jQuery中使用Plupload上传插件

这篇文章给大家介绍如何在jQuery中使用Plupload上传插件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司专业为企业提供城中网站建设、城中做网站、城中网站设计、城中网站制作等企业网站建设、网页设计与制作、城中企业网站模板建站服务，10多年城中做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

 首先下载plupload

因为Plupload可配置参数比较多，所以这里讲解最常用的，结合jquery-ui展示的界面！如下:

如何在jQuery中使用Plupload上传插件

Plupload默认支持html5,flash,silverlight,html4,四种上传方式,按照顺序进行加载，如果浏览器不支持html5则会选择flash...到最后html4,

如果不需要某种上传方式,在配置里面不写即可！

 直接上代码


  
    
Your browser doesn't have Flash, Silverlight or HTML5 support.

  
     $(function(){     $("#uploader").plupload({       runtimes: 'html5,flash,silverlight,html4',//这里可以不写,plupload默认支持       url: "UploadPhotoServlet",//上传后台请求路径       max_file_size: '1000mb',//用来限制单个文件大小的       multi_selection: true,//默认支持多文件上传,false不支持       chunk_size: '0',//是否将上传文件进行分片,0代表是不分       /*resize配置是对图片的处理         可以使用该参数对将要上传的图片进行压缩，该参数是一个对象，里面包括5个属性：width：指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度         height：指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度         crop：是否裁剪图片         quality：压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小         preserve_headers：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点         resize参数的配置示例如下：       */       /* resize : {         width: 200,         height: 200,         quality: 90,         crop: true       }, */       /* rename: true, *///允许多队列文件进行重命名       /* sortable: true,*/ //启用队列中的文件排序功能，更改上传优先级       /*dragdrop: true, */ //开启拖拽上传,默认true       /*         下面是展示右边的缩略图和列表 两个功能         默认显示缩略图       */       views: {         list: true,         thumbs: true, // Show thumbs         active: 'thumbs'       },       /*         flash 和 xap 上传需要的文件       */       flash_swf_url : 'plupload/js/Moxie.swf',       silverlight_xap_url : 'plupload/js/Moxie.xap'     });   })

在官方文档有这样一句话

如何在jQuery中使用Plupload上传插件

 也就是说，UI.Plupload 需要jquery-ui的支持,http://jqueryui.com/download/ 选择合适的主题，我选的是这个

如何在jQuery中使用Plupload上传插件

完整的 引入文件是


  
  
  
  
  
  
  
  
  plupload

如何在jQuery中使用Plupload上传插件

常见问题：

1、如果你发现点击 选择文件 按钮，弹出文件框特别慢，那么将，过滤文件代码去掉即可！根据具体情况，自己设置

filters: {
mime_types : [ //只允许上传图片和zip文件
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
],
max_file_size : '400kb', //最大只能上传400kb的文件
prevent_duplicates : true //不允许选取重复文件
}

可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性：mime_types：用来限定上传文件的类型，为一个数组，该数组的每个元素又是一个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为文件扩展名，有多个时用逗号隔开。该属性默认为一个空数组，即不做限制。

max_file_size：用来限定上传文件的大小，如果文件体积超过了该值，则不能被选取。值可以为一个数字，单位为b,也可以是一个字符串，由数字和单位组成，如'200kb'

prevent_duplicates：是否允许选取重复的文件，为true时表示不允许，为false时表示允许，默认为false。如果两个文件的文件名和大小都相同，则会被认为是重复的文件

2、如果后台使用是的是文件域名称接收文件，并且附加有额外参数

如何在jQuery中使用Plupload上传插件

需要额外设置两个参数

file_data_name:"uploadFile",//指定文件上传时文件域的名称，默认为file,例如在php中你可以使用$_FILES['file']来获取上传的文件信息
/* resize : {
  width: 200,
  height: 200,
  quality: 90,
  crop: true // crop to exact dimensions
}, */
multipart_params:{//上传时的附加参数，以键/值对的形式传入，服务器端可是使用$_POST来获取这些参数(以php为例)
 "prefixName":"magazine"
},

3、在和easyui,extjs等UI库进行整合时候，引入Plupload的文件一定要在easyui的引入文件之前，否则easyui会出现一些莫名奇妙的错误！

关于如何在jQuery中使用Plupload上传插件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


网站栏目：如何在jQuery中使用Plupload上传插件
文章源于：http://hbruida.cn/article/pgcpjh.html

其他资讯