首页 > 其他分享 >JS - 文件上传组件WebUploader使用详解1(带进度的文件上传)

JS - 文件上传组件WebUploader使用详解1(带进度的文件上传)

时间:2022-11-02 11:36:38浏览次数:90  
标签:文件 com JS WebUploader https gitee 上传

 一、基本介绍 

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
​编辑
(2)接着在页面中将 webuploader.js 和 webuploader.css 这两个文件引入进来。其中 webuploader.css 里面内容很简单,就是定义了“选择按钮”的样式(一个蓝色按钮,具体样式见后面效果图)
注意:由于 webuploader 依赖 jQuery,所以我们项目中还需将 jQuery 引入。

   

编辑


(3)而在初始化 WebUploader 时,我们还需要指定 Uploader.swf 的地址。具体配置方法见下面的样例代码部分。
注意:Uploader.swf 是在当浏览器不支持H5的情况下的备用方案。我们只需配置好路径即可,具体采用哪种方案 WebUploader 会自动选择,同时对用户体验方面也没任何区别。

二、基本用法
1,效果图
(1)点击“选择文件”按钮选择需要上传的文件,选择完毕后在下方显示出文件名。
​编辑

(2)点击“开始上传”按钮后开始上传文件,同时在上传的过程中会有进度显示。

​编辑
(3)同时服务端在接受并保存文件后,会将接收到的一些文件信息返回过来,客户端这边将其打印到控制台中,具体内容如下。

​编辑
(4)当然我们也可以选择多个文件,然后再一起上传。
加粗样式​编辑

2,样例代码
(1)客户端代码(index.html)
 

编辑


 
  

(2)服务端代码(upload.java)
注意:客户端是通过 form 表单的形式提交的

编辑

最后为你们提供一个功能更强大的插件示例,下载前选择对应的语言版本:

  asp.net:https://gitee.com/xproer/asp-net/tree/6.5.38/

 jsp-eclipse:https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

 jsp-myeclipse:https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

 jsp-springboot:https://gitee.com/xproer/jsp-springboot/tree/6.5.38/

 php:https://gitee.com/xproer/php/tree/6.5.38/

 vue-cli:https://gitee.com/xproer/vue-cli

 详细配置信息及思路

效果图:

​编辑

标签:文件,com,JS,WebUploader,https,gitee,上传
From: https://www.cnblogs.com/zyzzz/p/16850426.html

相关文章

  • JS中的this指向问题
    this的指向问题全局作用域在JS中,全局的变量和函数附着在global对象上,全局对象在浏览器环境下是window对象。在全局作用域中,this指向全局对象window。console.log(thi......
  • 拾色器,可以取出电脑屏幕的任何颜色,ui以及程序员前端等常用软件,文件很小,300K...
    作者:程序员小冰,今天给大家介绍一个小软件,挺实用的,叫做拾色器。用途:取出电脑屏幕的任意颜色,当你看到一个颜色很好看,而不知道它是什么RGB组成的,这个小软件就可以帮你忙了。适......
  • Excel VBA自动批量提取指定文件夹下所有的文件名
    ExcelVBA自动批量提取指定文件夹下所有的文件名​或许在某些时候,你会面临在一个文件夹下有很多文件名,但是如果一个一个的寻找是十分耗时的操作,那么我们是否有更为简便的操......
  • FFmpeg记录:文件格式记录
    一、输出mp3文件支持格式:AV_SAMPLE_FMT_U8PAV_SAMPLE_FMT_S16PAV_SAMPLE_FMT_S32PAV_SAMPLE_FMT_S64P二、输出mp4文件支持音频格式(aac编码)AV_SAMPLE_FMT_FLTP......
  • python给替换json字符串中的值&通过路径获取json字符串的值
    一、内容替换json字符串中的值 通过路径获取json字符串的值二、代码替换json字符串中的值 defrepalceJson(t_json,value,path):"""通过json路径......
  • 将Word文件中的表格批量写入Excel,你知道咋在一瞬间完成的吗?
    ExcelVBA将Word文件中的表格批量写入Excel,知道咋在一瞬间完成的吗?我们本文要介绍的是如何使用VBA代码将Word文件的表格数据批量写入Excel中间,一起来看看吧!举个例子,假如您有......
  • JS 计算两个 日期的 时间
    /**获得时间差,时间格式为年-月-日小时:分钟:秒或者年/月/日小时:分钟:秒*其中,年月日为全格式,例如:2010-10-1201:00:00*返回精度为:秒,分,小时,天*/function......
  • 010003 JS 特殊符号十进制编码
    <?phpheader('Content-Type:text/html;charset=utf-8');include'./assets/php/head.php';?><scripttype="text/javascript">//010003JS特殊符号表functiontoUn......
  • 文件上传
    一、后缀名绕过1、默认情况下,lamp会将php\phtml\php3\php4\php5\pht等文件解析为php1、php\php5\php4\php3\php2\phtml\pht 2、特殊后缀.htaccess/.user.ini.htacc......
  • 理解NodeJS多进程
    序言一次面试中,我提到自己用过pm2,面试接着问:「那你知道pm2父子进程通信方式吗」。我大概听说pm2有cluster模式,但不清楚父子进程如何通信。面试结束后把NodeJS的多进程重新......