我想對文本檔案進行一些分析。在網頁中上傳檔案后，我正在嘗試重定向路線，但這不起作用。令人驚訝的是，列印陳述句正在重定向路由的控制臺中運行，但模板沒有呈現。
除錯模式為真，我多次運行此命令 set FLASK_DEBUG=1。我迫切需要幫助:(任何幫助將不勝感激。
imo javascript 中存在一些問題，即不允許 python 更改 url。
我的前端頁面是
<body>
<div class="split left" >
<img src="/static/acgt.png" class="logo"/>
<h2><u>Description<br/><br/></u></h2>
<p>There are some text in here</p>
<br/>
<br/>
<div class="file-upload">
<input class="file-upload__input" type="file" name="myFile" id="myFile" oninput="upload('{{ request.url }}');">
<button class="file-upload__button" type="button" >Upload FASTA file from your device</button>
<span class="file-upload__label"></span>
</div>
<div id="progress_wrapper" class="d-none">
<label id="progress_status" style="color: white;">50% uploaded</label>
<div class="progress mb-3">
<div id="progress" class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div >
<p class = "errorMsg" style="margin-top: 20px; color:#FF6347 ; font-size:1.3em;">{{errorMessage}}</p>
</div>
</div>
<div class="split right">
</div>
<script>
const btn = document.querySelector('.file-upload__button')
const hiddenInput = btn.parentElement.querySelector('.file-upload__input');
const label = btn.parentElement.querySelector('.file-upload__label');
const defaultLabelText = '';
label.textContent = defaultLabelText;
label.title = defaultLabelText;
btn.addEventListener('click', function ( ) {
hiddenInput.click();
});
hiddenInput.addEventListener('change',function() {
const filename = Array.prototype.map.call(hiddenInput.files, function (file) {
return file.name;
});
label.textContent = filename || defaultLabelText;
});
function upload(url) {
var progress_wrapper = document.getElementById("progress_wrapper");
progress_wrapper.classList.remove("d-none");
var progress = document.getElementById("progress");
var progress_status = document.getElementById("progress_status");
var data = new FormData();
var request = new XMLHttpRequest();
request.responseType = "json";
var file = hiddenInput.files[0];
console.log(typeof(file));
var filename = file.name;
console.log(filename)
var filesize = file.size;
document.cookie = `filesize=${filesize}`;
data.append("file", file);
request.upload.addEventListener("progress", function (e) {
// Get the loaded amount and total filesize (bytes)
var loaded = e.loaded;
var total = e.total
// Calculate percent uploaded
var percent_complete = (loaded / total) * 100;
// Update the progress text and progress bar
progress.setAttribute("style", `width: ${Math.floor(percent_complete)}%`);
progress_status.innerText = `${Math.floor(percent_complete)}% uploaded`;
});
request.addEventListener("loadend",function(e){
if(request.status == 200) {
console.log("Success should be shown using alert")
}else{
console.log("Failed to upload the file, Sad life :(")
}
});
request.open("post", url);
request.send(data);
}
</script>
</body>
和python頁面是
@app.route('/home', methods=["GET", "POST"])
def hello_world():
if request.method == "POST":
filesize = request.cookies.get("filesize")
file = request.files["file"]
res = make_response(jsonify({"message" : f"{file.filename} uploaded"}), 200)
return redirect(url_for('dummyroute'))
return render_template('home.html')
@app.route('/dummyroute')
def dummyroute():
print("This is getting printed in console")
return '<h1>I am getting mad<h1>'
uj5u.com熱心網友回復：
如果您使用 JavaScript/AJAX 發送request，則response發送到此 JavaScript 代碼 - JavaScript 的請求被重定向到/dummyroute，JavaScript 從中獲得回應，/dummyroute但瀏覽器不會嘗試將其response用于redirect整頁。
AJAX 的發明是為了在您使用 AJAX 時不重新加載整個頁面，并且瀏覽器不會重新加載/重定向頁面。
您將不得不直接在 JavaScript 中重定向整頁 -document.location = '/dummyroute'
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/482407.html