还是很简洁的：
a、一个div#uploadBox，里面ul li 代表每个上传图片单元
b、li img 图片
c、li span.progress用于显示进度，有种水上涨的效果，从height:0% -100%;
d、li span.percentage 用于在图片中央显示 1% 到100%数字，当到达100%时，显示一个正确的图片
CSS：
body
{
background: #eee;
}
#uploadBox
{
width: 622px;
height: 362px;
background-color: #fff;
border: 1px solid #777;
margin: 120px auto;
}
#uploadBox ul li
{
float: left;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
#uploadBox li img
{
border: 1px solid #D1D1D1;
width: 198px;
height: 112px;
vertical-align: middle;</
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量
转载请注明出处或者链接地址：https://www.qianduange.cn//article/7542.html
相关文章
-
网站添加pwa操作和配置manifest.json后，没有效果排查问题
-
Spring Boot 3.0：未来企业应用开发的基石
-
Vue VueUse-基于Vue组合式API的实用工具集
-
深入理解Vue 3.0中的watch属性immediate和deep的用法
-
Vue之调用store的action(包含getter调用)
-
vue-quill-editor和vue-ueditor-wrap富文本编辑器应用
-
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
-
卤菜销售|基于SSM＋vue的智能卤菜销售平台系统的设计与实现(源码 数据库 文档)
-
网盘（结合百度网盘/阿里网盘）
-
react router v6路由守卫权限控制
发布的文章
网站添加pwa操作和配置manifest.json后，没有效果排查问题
2024-06-09 10:06:46
探索GeoJSON.io：在线地图数据可视化与编辑的利器
2024-06-09 10:06:45
使用JSON.parse()出现的一些SyntaxError异常报错问题
2024-06-09 10:06:44
JSON 字符串转换 —— Map、List
2024-06-09 10:06:44
【微信小程序开发】解决出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string的问题
2024-06-09 10:06:40
MySQL 将json转为行，JSON_TABLE函数详解
2024-06-09 10:06:33
java— 读取JSON文件的多种方式
2024-06-09 10:06:33
Fastjson开启安全模式5种方法（VIP典藏版）
2024-06-09 10:06:55
Unity数据解析（Json、XML、CSV、二进制）
2024-06-09 10:06:54
JSON文件转换为CSV或XLSX文件
2024-06-09 10:06:54
大家推荐的文章