当前位置:网站首页>webuploader文件上传 拖拽上传 进度监听 类型控制 上传结果监听控件
webuploader文件上传 拖拽上传 进度监听 类型控制 上传结果监听控件
2022-07-05 19:23:00 【-耿瑞-】
webuploader 是一款兼容性很强 且也非常好用的前端控件 vue项目中也可以使用
我们先来简单看看
大家可以先下载我上传的资源插件
https://download.csdn.net/download/weixin_45966674/85899651?spm=1001.2014.3001.5503
下载下来后我们可以看到目录如下
没错 这款插件是依赖jquery 这是个小败笔吧 不过上一代的技术 也确实基本都要依赖jq
然后我们建一个目录 建一个webuploader 将这四个文件放进里面
然后和webuploader同级目录创建页面
演示代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入WebUploader文件上传的CSS-->
<link rel="stylesheet" type="text/css" href="./webuploader/webuploader.css" media="screen" />
<script type="text/javascript" src="./webuploader/jquery-1.8.3.js"></script>
<!--引入WebUploader文件上传的JS-->
<script type="text/javascript" src="./webuploader/webuploader.js"></script>
<style> .maskUpload{
width: 300px; height: 300px; background-color: blueviolet; } </style>
</head>
<body>
<!--用来存放文件信息-->
<div class="uploader-demo">
<div class="btns">
<div id="filePicker">选择文件</div>
<button id="ctlBtn" class="mybutton" onclick="upload_imgs()">开始上传</button>
<div class = "maskUpload"></div>
</div>
</div>
<script type="text/javascript"> var uploader; $(function(){
//初始化Web Uploader,每上传一个文件都会创建一个uploader对象,同时选择多个文件时,则会创建多个uploader对象。 uploader = WebUploader.create({
// 选完文件后,是否自动上传。 auto: false, //true时,选择文件后自动上传。 // swf文件路径 swf: 'resources/widget/webuploader/Uploader.swf', // 文件接收服务端。 server: 'upload/uploadImg', // 选择文件的按钮。可选。 pick: '#filePicker', dnd: ".maskUpload", accept: {
title: '文件上传', //支持上传的文件类型 extensions: 'jpg,png,doc,xlsx', mimeTypes: '*' } }); //当文件被加入队列时触发 uploader.on('fileQueued',function (file) {
console.log(file); }); //队列中所有文件上传结束时触发 uploader.on('error', (type) => {
console.log('上传文件类型不支持时触发'); }); //文件上传中实时返回进度 uploader.on('uploadProgress', (file, percentage) => {
console.log('上传进度'+percentage); }); //文件上传成功时触发 uploader.on("uploadSuccess",function (file,response) {
console.log('上传成功'); }); //文件上传错误时触发 uploader.on('uploadError', (file, reason) => {
console.log('上传失败'); }); //队列中所有文件上传结束时触发 uploader.on('uploadFinished', (file, reason) => {
console.log('上传结束'); }); }) //上传图片 function upload_imgs() {
if (uploader){
uploader.upload(); } } </script>
</body>
</html>
然后我们点击上传 这里extensions控制文件后缀格式 我设置的格式 只支持 jpg,png,doc,xlsx
点击上传如果是对的合适 就会被加入队列 触发fileQueued 每一个文件加入队列都会触发fileQueued 我们可以定义一个数组 将fileQueued的每一次文件流都存起来展示用
然后我们上传不支持的格式 就会被uploadFinished拦截下来
我们点击上传就会触发uploadProgress 这个是这款框架我觉得最大的亮点 可以监听到上传的进度 走到多少了
执行 uploader.upload();直接上传
上传成功触发uploadSuccess
失败则执行uploadFinished
当然还有一个亮点就是拖拽上传
dnd属性控制 里面对应的就是css选择器 选择拖拽到哪块元素上触发上传
我们这里设置了 class 为 maskUpload 的div
我们将文件从电脑直接拖拽到界面上就会触发添加到队列中 也是非常的好用
但这个工具需要后台配合 server控制上传的服务端口 swf设置上传的接口名称
边栏推荐
- 块编辑器如何选择?印象笔记 Verse、Notion、FlowUs
- Apprentissage du projet MMO I: préchauffage
- C#应用程序界面开发基础——窗体控制(6)——菜单栏、工具栏和状态栏控件
- Decision tree and random forest
- The basic grammatical structure of C language
- HiEngine:可媲美本地的云原生内存数据库引擎
- Debezium系列之:解析默认值字符集
- 华为让出的高端市场,小米12S靠徕卡能抢到吗?
- 2022 the latest big company Android interview real problem analysis, Android development will be able to technology
- acm入门day1
猜你喜欢
ELK分布式日志分析系统部署(华为云)
【C语言】字符串函数及模拟实现strlen&&strcpy&&strcat&&strcmp
手把手教你处理 JS 逆向之图片伪装
使用easyexcel模板导出的两个坑(Map空数据列错乱和不支持嵌套对象)
安卓面试宝典,2022Android面试笔试总结
【合集- 行业解决方案】如何搭建高性能的数据加速与数据编排平台
微波雷达感应模块技术,实时智能检测人体存在,静止微小动静感知
国内低代码开发平台靠谱的都有哪些?
[AI framework basic technology] automatic derivation mechanism (autograd)
PHP利用ueditor实现上传图片添加水印
随机推荐
618“低调”谢幕,百秋尚美如何携手品牌跨越“不确定时代”?
Worthy of being a boss, byte Daniel spent eight months on another masterpiece
2022 the latest big company Android interview real problem analysis, Android development will be able to technology
How to realize the Online timer and offline timer in the game
数据库 逻辑处理功能
Mysql如何对json数据进行查询及修改
MySQL中字段类型为longtext的值导出后显示二进制串方式
That's awesome. It's enough to read this article
ELK分布式日志分析系统部署(华为云)
Go语言学习教程(十六)
How to convert word into PDF? Word to PDF simple way to share!
C# 语言的高级应用
The basic grammatical structure of C language
信息/数据
安卓面试宝典,2022Android面试笔试总结
司空见惯 - 英雄扫雷鼠
完爆面试官,一线互联网企业高级Android工程师面试题大全
建议收藏,我的腾讯Android面试经历分享
Reinforcement learning - learning notes 4 | actor critical
word如何转换成pdf?word转pdf简单的方法分享!