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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery简易手风琴插件的封装
Oct 13 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
PHP脚本数据库功能详解(中)
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JS一次前端面试经历记录
2020/03/19 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python处理按钮消息的实例详解
2017/07/11 Python
python实现图片彩色转化为素描
2019/01/15 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
还款承诺书范文
2014/05/20 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript