JS - 文件上传组件WebUploader使用详解1(带进度的文件上传)
一、基本介绍
1,什么是 WebUploader?
WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件。
官网地址:http://fex.baidu.com/webuploader/
JS - 文件上传组件WebUploader使用详解2(MD5秒传、判断是否已经上传过)
2,功能特点
分片、并发:WebUploader 采用大文件分片并发上传,极大的提高了文件上传效率。
预览、压缩:WebUploader 支持常用图片格式 jpg,jpeg,gif,bmp,png 预览与压缩,节省网络数据传输。
多途径添加文件:支持文件多选,类型过滤,拖拽(文件 & 文件夹),图片粘贴功能。
HTML5 & FLASH:兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。
MD5 秒传:当文件体积大、量比较多时,支持上传前做文件 md5 值验证,一致则可直接跳过。
易扩展、可拆分:采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。
3,安装配置
(1)首先我们访问如下地址下载最新版本,并解压放到我们的项目文件夹中。
下载地址:https://github.com/fex-team/webuploader/releases
(3)而在初始化 WebUploader 时,我们还需要指定 Uploader.swf 的地址。具体配置方法见下面的样例代码部分。
注意:Uploader.swf 是在当浏览器不支持H5的情况下的备用方案。我们只需配置好路径即可,具体采用哪种方案 WebUploader 会自动选择,同时对用户体验方面也没任何区别。
二、基本用法
1,效果图
(1)点击“选择文件”按钮选择需要上传的文件,选择完毕后在下方显示出文件名。
(2)点击“开始上传”按钮后开始上传文件,同时在上传的过程中会有进度显示。
2,样例代码
(1)客户端代码(index.html)
(2)服务端代码(upload.java)
注意:客户端是通过 form 表单的形式提交的
最后为你们提供一个功能更强大的插件示例,下载前选择对应的语言版本:
asp.net:
jsp-eclipse:
jsp-myeclipse:
jsp-springboot:
php:
vue-cli:
效果图:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
2021-11-02 Web编辑器可以如何直接复制word的图文内容到编辑器中?
2021-11-02 HTML编辑器可以如何直接复制word的图文内容到编辑器中?
2021-11-02 在线编辑器可以如何直接复制word的图文内容到编辑器中?
2021-11-02 富文本编辑器可以如何直接复制word的图文内容到编辑器中?
2021-11-02 TinyMCE可以如何直接复制word的图文内容到编辑器中?
2021-11-02 wangEditor可以如何直接复制word的图文内容到编辑器中?
2021-11-02 xhEditor可以如何直接复制word的图文内容到编辑器中?