位置: 编程技术 - 正文

快速掌握jQuery插件WebUploader文件上传(jquery 插件写法)

编辑:rootadmin

推荐整理分享快速掌握jQuery插件WebUploader文件上传(jquery 插件写法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery插件的使用方法,jquery插件大全,如何使用jquery插件,jquery插件的使用方法,jquery插件是干什么的,jquery插件怎么写,jquery插件怎么用到自己的网站,jquery插件的使用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题。

WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主,FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势,同时又不摒弃主流IE浏览器,沿用原来的 FLASH 运行时,兼容 IE6+,iOS 6+, android 4+。采用大文件分片并发上传,极大的提高了文件上传效率。

参考百度官网进行学习借鉴,整理,具体内容如下

先来说一说WebUploader的特性:

分片、并发

  分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。

  当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

具体就可以查看:jQuery webuploader分片上传大文件

预览、压缩

  支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。

  解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。

多途径添加文件

  支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。

  粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。

HTML5 & FLASH

  兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。

  同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。

MD5秒传

  当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。

  如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在ms左右。

易扩展、可拆分

  采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。

  采用AMD规范组织代码,清晰明了,方便高级玩家扩展。

只有知道了WebUploader文件上传插件的特性,才能更充分的发挥其作用。

如何使用?

快速掌握jQuery插件WebUploader文件上传(jquery 插件写法)

引入资源使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

1、文件上传

WebUploader只包含文件上传的底层实现,不包括UI部分,所以交互方面可以自由发挥。

Html部分

首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

初始化Web Uploader

具体说明,请看一下代码中的注释部分。

显示用户选择由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。

文件上传进度

文件上传中,Web Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传进度。

文件成功、失败处理

文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

2、图片上传

Html:

要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

Javascript:

创建Web Uploader实例

监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。PS: 这里得到的是Data URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

然后剩下的就是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

小案例:webuploader使用java如何实现上传?

Html代码

js代码

上传文件和普通的spring一样

Java代码

引用

Spring MVC3.2开始支持通过Servlet3.0实现文件上传

Xml代码

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

标签: jquery 插件写法

本文链接地址:https://www.jiuchutong.com/biancheng/379312.html 转载请保留说明!

上一篇:jquery.validate表单验证插件使用方法解析(jquery validator)

下一篇:jQuery webuploader分片上传大文件

  • 税控盘这个月没有反写会怎么样
  • 公司公积金缴纳比例一般来说是多少?
  • 损益类结转本年利润摘要
  • 营改增以前土地交易应交税费
  • 什么情况下征税
  • 不同组织的区别主要体现在哪些方面
  • 商业汇票贴现金额的计算
  • 购入材料用于安装工程
  • 应收款抹零计入什么会计科目
  • 法院一直扣着我的钱不给可以起诉他吗
  • 出口货物如果没收怎么办
  • 不动产转让费用咋算
  • 收取境外服务费收入会计分录
  • 装修行业一般纳税人税负率是多少
  • 不同类型商业分布的特征
  • 税收协助
  • 延期缴纳税款的条件是什么
  • 存货的损失计入什么科目
  • 建筑发票怎么抵税
  • 主营业务成本结转方法
  • 土地增值税允许扣除的评估价
  • 研发费水电费比例怎么分配
  • 实收资本和注册资本的账务处理
  • 什么是长期应付薪酬
  • 开具成品油发票规格型号有哪些要求
  • 手撕定额发票能不能报销
  • 行政事业单位临聘人员
  • win7有线连接怎么设置
  • 收益性支出与资本性支出的主要特点
  • php更新数据
  • 补缴增值税怎么做账
  • 提示内存不足
  • 销售方收到购买方的红字信息表
  • members-area.exe是什么进程 members-area进程查询
  • php中imagecreatefromjpeg
  • 收到银行退回账号短信
  • 差旅费误餐补贴标准
  • php异步处理方案
  • HTML+CSS+JS+Jquery+练手项目+...合集(前端学习必备,持续更新中...)
  • dex源码提取
  • 微信公众号认证300元每年都要吗
  • 销售费用工资明细科目
  • 工资可以当月计提当月发放怎么做账
  • 帝国cms灵动标签下拉框
  • 教育经费什么情况下可以报销
  • 购买固定资产发生的支出是资本性支出
  • 用友t3制单日期定住不变
  • 影响存货管理的因素有哪些
  • 所有者投入的资本属于什么会计要素
  • 对公账户里的钱怎么转出来合法
  • 补贴收入属于其他收益吗
  • 企业合并中或有对价的会计处理
  • 铁路运输印花税按什么比例交
  • 预存返利骗局
  • 委托加工物资的加工费计入什么科目
  • 生产成本里面的直接人工
  • 支票丢失需要登报吗
  • sql server数据库数据备份
  • win7系统玩游戏好吗
  • winxp无法删除文件
  • mac电脑自带软件介绍
  • vrvedp_m.exe是什么
  • win8系统电脑没声音怎么办
  • macbook如何安装windows
  • linux下使用lftp的小结(远程服务器备份)
  • win10自带的杀软叫什么
  • ssh远程登录设置
  • win8 自动登录
  • ExtJS PropertyGrid中使用Combobox选择值问题
  • 批处理文件是将需要连续使用的可多次重复使用的
  • 基于web的旅游网站毕业设计
  • jquery 图片插件
  • jQuery插件库
  • shaders initialized
  • android实现底部菜单
  • javascript面向对象编程指南
  • 河南电子税务局官网入口
  • 收到12366的短信
  • 山东税务社保缴纳进入小程序
  • 出口之后必须办什么手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设