jQuery Plupload上传插件的使用


Posted in jQuery onApril 19, 2017

jQuery Plupload上传插件的使用 首先下载plupload->http://www.plupload.com

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

jQuery Plupload上传插件的使用

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

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

 直接上代码

<body>
  <div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
  </div>
  <script type="text/javascript">
  $(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'
    });
  })
</script>
</body>

在官方文档有这样一句话

jQuery Plupload上传插件的使用

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

jQuery Plupload上传插件的使用

完整的 引入文件是

<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>

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会出现一些莫名奇妙的错误!

ok,到这里基本完成Plupload的使用,plupload中文参考文档 http://www.phpin.net/tools/plupload/,

这个文档仅仅介绍了Plupload基本的options,一些UI高级用法需要参考,

http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method

以上所述是小编给大家介绍的jQuery Plupload上传插件的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
Jquery-data的三种用法
Apr 18 #jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
javascript Keycode对照表
2009/10/24 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python多线程爬虫简单示例
2016/03/04 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
保健品市场营销方案
2014/03/31 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
工作收入住址证明
2014/10/28 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
考试后的感想
2015/08/07 职场文书
中秋节随笔
2015/08/15 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书