对上传文件的展示、增删重选功能(前后端代码)
代码上传的是Excel,其他文件只需要修改上传类型即可
复制代码就可运行 目录
代码上传的是Excel,其他文件只需要修改上传类型即可
(一)效果预览:
(二)前端代码
(三)后端代码
(一)效果预览:
1、初次加载
文章图片
2、点击选择文件或重选后
文章图片
3、追加文件
文章图片
4、删除文件,鼠标移上去点击就可删除
文章图片
(二)前端代码
showImages - 锐客网 body{
background-color: #fff;
}
.float{
float:left;
width : 200px;
height: 40px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
img{
position: relative;
}
.result{
width: 200px;
height: 40px;
text-align: center;
box-sizing: border-box;
}#file_up{
display: none;
}.delete{
width: 200px;
height:40px;
position: absolute;
text-align: center;
line-height: 40px;
z-index: 10;
font-size: 15px;
background-color: rgba(255,255,255,0.8);
color: #777;
opacity: 0;
transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
}.delete:hover{
cursor: pointer;
opacity: 1;
}
(三)后端代码
路由:
文章图片
views.py
先安装pandas,来处理excel
# 接收多文件
import pandas as pd
def multi_upload(request):if request.method == "POST":data = request.FILES.items()for file in data:
file_content = pd.read_excel(file[1])
print(file_content)
return render(request,'project_info.html')
当然可以自己改改样式:
【对上传文件的展示、增删重选功能(前后端代码)】
文章图片
推荐阅读
- 布丽吉特,人生绝对的赢家
- 进必趋|进必趋 退必迟,问起对 视勿移
- 对称加密和非对称加密的区别
- 对抗抑郁最好的方法
- 装聋作哑,关系融洽
- 社保代缴公司服务费包含哪些
- django-前后端交互
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 使用composer自动加载类文件
- 数组常用方法一