静安手机网站建设,特产网站建设,听完米课做的网站,平台推广怎么做2023.11.17使用flask将多个图片文件上传至服务器
实现功能#xff1a; 1、同时上传多个图片文件 2、验证文件扩展名 3、显示上传文件的文件名 4、显示文件上传结果 程序结构 main.py
from flask import Flask, request, jsonify, render_template
import osapp Flask(__n…2023.11.17使用flask将多个图片文件上传至服务器
实现功能 1、同时上传多个图片文件 2、验证文件扩展名 3、显示上传文件的文件名 4、显示文件上传结果 程序结构 main.py
from flask import Flask, request, jsonify, render_template
import osapp Flask(__name__)# 设置上传文件存储目录
UPLOAD_FOLDER uploads
app.config[UPLOAD_FOLDER] UPLOAD_FOLDER# 允许上传的文件类型
ALLOWED_EXTENSIONS {png, jpg, jpeg, gif}app.route(/)
def index():return render_template(index.html)# 检查文件名是否合法
def allowed_file(filename):return . in filename and filename.rsplit(., 1)[1].lower() in ALLOWED_EXTENSIONS# 处理文件上传
app.route(/upload, methods[POST])
def upload_file():files request.files.getlist(file)success_files []failed_files []for file in files:if file and allowed_file(file.filename):filename file.filenamefile.save(os.path.join(app.config[UPLOAD_FOLDER], filename))success_files.append(filename)else:failed_files.append(file.filename)if failed_files:return jsonify({message: 部分文件上传失败, failed_files: failed_files})else:return jsonify({message: 所有文件上传成功, success_files: success_files})if __name__ __main__:app.run(debugTrue)index.html
!DOCTYPE html
html
headtitle文件上传/titlelink hrefhttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css relstylesheetscript srchttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js/script
/head
bodydiv classcontainerh1 classmt-5 mb-4文件上传/h1form idupload-form action/upload methodpost enctypemultipart/form-datadiv classcustom-file mb-3input typefile classcustom-file-input idfileInput namefile multiplelabel classcustom-file-label forfileInput选择文件/label/divbutton typesubmit classbtn btn-primary上传/button/formdiv idresult classmt-3/div/divscriptdocument.getElementById(upload-form).addEventListener(submit, function(e) {e.preventDefault();var formData new FormData(this);fetch(/upload, {method: POST,body: formData}).then(response response.json()).then(data {if (data.failed_files) {document.getElementById(result).innerHTML div classalert alert-danger rolealert部分文件上传失败: data.failed_files.join(, ) /div;} else {document.getElementById(result).innerHTML div classalert alert-success rolealert data.message /div;}}).catch(error {console.error(error);});});// 更新文件选择框显示已选择的文件名document.getElementById(fileInput).addEventListener(change, function () {var files this.files;var label ;for (var i 0; i files.length; i) {label files[i].name , ;}// /$/ 表示匹配以逗号结尾的部分。即将最后一个逗号清除label label.replace(/, $/, );this.nextElementSibling.innerText label;});/script
/body
/html
