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 04 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现简单飞机大战
Jul 05 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遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
jQuery EasyUI封装简化操作
2016/09/18 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
教师学习培训邀请函
2014/02/04 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
李强优秀员工观后感
2015/06/16 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python