对上传文件的展示、增删重选功能(前后端代码)

代码上传的是Excel,其他文件只需要修改上传类型即可
复制代码就可运行 目录
代码上传的是Excel,其他文件只需要修改上传类型即可
(一)效果预览:
(二)前端代码
(三)后端代码
(一)效果预览:
1、初次加载
对上传文件的展示、增删重选功能(前后端代码)
文章图片

2、点击选择文件或重选后
对上传文件的展示、增删重选功能(前后端代码)
文章图片

3、追加文件
对上传文件的展示、增删重选功能(前后端代码)
文章图片

4、删除文件,鼠标移上去点击就可删除
对上传文件的展示、增删重选功能(前后端代码)
文章图片

(二)前端代码

showImagesbody{ 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')

当然可以自己改改样式:
【对上传文件的展示、增删重选功能(前后端代码)】对上传文件的展示、增删重选功能(前后端代码)
文章图片

    推荐阅读