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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
node+vue实现文件上传功能
2020/05/28 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python是什么 Python的用处
2020/05/26 Python
python实现登录与注册系统
2020/11/30 Python
团员学习总结的自我评价范文
2013/10/14 职场文书
毕业生自荐书
2014/02/02 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
员工2014年度工作总结
2014/12/09 职场文书
学生检讨书范文
2015/01/27 职场文书
档案管理员岗位职责
2015/02/12 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python