jQuery上传插件webupload使用方法


Posted in jQuery onAugust 01, 2017

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。

这个插件很好用,功能也比较强大,比ajaxfileupload要强大,可去官方网站下载。

目前项目中只用到了图片批量上传功能,官方示例已经写的很详细了,下面介绍下如何把官方示例迁移到自己的项目中:

// 实例化
 uploader = WebUploader.create({
  pick: {
  id: '#filePicker',
  label: '点击选择图片'
  },
  formData: {
  uid: 123
  },
  dnd: '#dndArea',
  paste: '#uploader',
  swf: '../../dist/Uploader.swf',
  chunked: false,
  chunkSize: 512 * 1024,
  server: '../../server/fileupload.php',
  // runtimeOrder: 'flash',

  // accept: {
  // title: 'Images',
  // extensions: 'gif,jpg,jpeg,bmp,png',
  // mimeTypes: 'image/*'
  // },

  // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  disableGlobalDnd: true,
  fileNumLimit: 300,
  fileSizeLimit: 200 * 1024 * 1024, // 200 M
  fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
 });

1、server  修改为自己的后台处理类 通过 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; request.Files的方式获取插件上传的图片。

2、示例程序默认是启用压缩的,这个可以设置,当图片大于多少是可以自动压缩图片的,如果不需要压缩,则需要再初始化的时候添加 compress:false, 属性

3、

accept: {
  title: 'Images',
  extensions: 'gif,jpg,jpeg,bmp,png',
  mimeTypes: 'image/*'
  },

官方上传图片的示例不知道什么原因把图片筛选这个注释掉了,如果想上传的文件只能选择图片,则需要去掉注释

4、增加了对图片像素大小的判断,自己用了uploadAccept 方法,是把图片提交上去了之后再后台进行判断的,(不知是否有更好的办法)因为插件本身的file类是可以处理文件的,所以并没有单独获取像素的属性,示例:

uploader.on('uploadAccept', function (object, ret) {
 
  var resJson = $.parseJSON(ret._raw);
  if (resJson.result == "error") {
   alert(object.file.name + "象素太低,请检查上传!");
   return false;
  }
 
  });

该方法返回false的时候,会导致图片上传失败,所以后台判断像素后通过后台返回的状态来改变图片上传的状态。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
简述jQuery Easyui一些用法
Aug 01 #jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
jquery easyui如何实现格式化列
Jul 30 #jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
js模拟微博发布消息
2017/02/23 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
护士求职自荐信范文
2014/03/19 职场文书
园艺师求职信
2014/04/27 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
音乐学专业求职信
2014/07/22 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
《迟到》教学反思
2016/02/24 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript