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实现瀑布流页面
Apr 11 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jquery实现简单拖拽效果
Jul 20 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
JAVA/JSP学习系列之六
2006/10/09 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
pyqt5中动画的使用详解
2020/04/01 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
课程改革实施方案
2014/03/16 职场文书
入股协议书范本
2014/04/14 职场文书
财务管理专业自荐书
2014/09/02 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python