[英]Is there any way to send the attachment file uploaded in the Javascript to Python/Flask?
此代碼上傳文件,但我無法集成我的 Javascript 和 Flask 代碼,也就是說,前端正在接收文件,但不會將其發送到后端。
//DOM
const $ = document.querySelector.bind(document);
//APP
let App = {};
App.init = (function () {
//Init
function handleFileSelect(evt) {
const files = evt.target.files; // FileList object
//files template
let template = `${Object.keys(files)
.map(file => `<div class="file file--${file}">
<div class="name"><span>${files[file].name}</span></div>
<div class="progress active"></div>
<div class="done">
<a href="" target="_blank">
</a>
</div>
</div>
</div>`)
.join("")}`;
$("#drop").classList.add("hidden");
$("footer").classList.add("hasFiles");
$(".importar").classList.add("active");
$(".submit").classList.add("active");
setTimeout(() => {
$(".list-files").innerHTML = template;
}, 1000);
Object.keys(files).forEach(file => {
let load = 2000 + (file * 2000); // fake load
setTimeout(() => {
$(`.file--${file}`).querySelector(".progress").classList.remove("active");
$(`.file--${file}`).querySelector(".done").classList.add("anim");
}, load);
});
}
// trigger input
$("#triggerFile").addEventListener("click", evt => {
evt.preventDefault();
$("input[type=file]").click();
});
$("#triggerFile2").addEventListener("click", evt => {
evt.preventDefault();
$("input[type=file]").click();
});
// drop events
$("#drop").ondragleave = evt => {
$("#drop").classList.remove("active");
evt.preventDefault();
};
$(`#drop`).ondragover = $("#drop").ondragenter = evt => {
$("#drop").classList.add("active");
evt.preventDefault();
};
$("#drop").ondrop = evt => {
$("input[type=file]").files = evt.dataTransfer.files;
$("footer").classList.add("hasFiles");
$("#drop").classList.remove("active");
evt.preventDefault();
};
//upload more
$(".importar").addEventListener("click", () => {
$(".list-files").innerHTML = "";
$("footer").classList.remove("hasFiles");
$(".importar").classList.remove("active");
$(".submit").classList.remove("active");
setTimeout(() => {
$("#drop").classList.remove("hidden");
}, 500);
});
// input change
$("input[type=file]").addEventListener("change", handleFileSelect);
})();
<form method="post" action="/" enctype="multipart/form-data" id="myForm">
<header>
<p>
<span class="up">up</span>
<span class="load">load</span>
</p>
</header>
<div class="body" id="drop">
<i class="fa fa-cloud-upload" aria-hidden="true" id="triggerFile"></i>
<p id="text-upload" class="pointer-none"><a href="" id="triggerFile2">
<strong>Browse</strong></a> to begin the upload
</p>
<input type="file" multiple="multiple" />
</div>
<footer>
<div class="divider">
<span>
<AR>FILES</AR>
</span>
</div>
<div class="list-files">
<!-- template -->
</div>
<button class="importar">Clear</button>
<button class="submit" type="submit" value="Submit"">Submit</button>
</footer>
</form>
import os
from flask import Flask, flash, request, redirect, render_template
from werkzeug.utils import secure_filename
app=Flask(__name__)
app.secret_key = "secret key"
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
path = os.getcwd()
# file Upload
UPLOAD_FOLDER = os.path.join(path, 'uploads')
if not os.path.isdir(UPLOAD_FOLDER):
os.mkdir(UPLOAD_FOLDER)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
ALLOWED_EXTENSIONS = set(['xlsx', 'xls'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/')
def upload_form():
return render_template('index.html')
@app.route('/', methods=['POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No file selected for uploading')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
flash('File successfully uploaded')
return redirect('/')
else:
flash('Allowed file types are txt, pdf, png, jpg, jpeg, gif')
return redirect(request.url)
if __name__ == "__main__":
app.run(host = '127.0.0.1',port = 5000, debug = False)
我試過這些鏈接:
您必須先在 html 中指定要調用的 function: <form method="post" action="{{url_for('upload_file')}}" enctype="multipart/form-data" id="myForm">
並將名稱傳遞給檢測上傳文件的輸入元素: <input type="file" multiple="multiple" name="file[]" />
第二件事是在你的upload_file()
中,要獲取上傳的文件,你只需要使用這個示例: uploaded_files = request.files.getlist("file[]")
,之后,你就可以訪問你所有的文件通過對它們使用 for 循環for file in uploaded_files:
如果您有任何問題,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.