主程序
from flask import Flask, request, render_template
app = Flask(__name__)
# 用于存儲上傳文件的目錄艰争，請根據(jù)實際情況修改
UPLOAD_FOLDER = 'uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/')
def upload_form():
return render_template('upload.html')
@app.route('/', methods=['POST'])
def upload_file():
file = request.files['file']
if file:
filename = file.filename
file.save(app.config['UPLOAD_FOLDER'] + filename)
return f'文件 "{filename}" 上傳成功!'
else:
return '沒有選擇文件'
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000) # 這里設(shè)置為監(jiān)聽所有IP，以便手機在同一網(wǎng)絡(luò)下可以訪問
upload.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上傳帶進度</title>
<style>
#progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
}
#progress-bar div {
height: 30px;
background-color: #4CAF50;
width: 0%;
text-align: center;
line-height: 30px;
color: white;
transition: width 0.5s;
}
</style>
</head>
<body>
<h1>上傳文件并顯示進度</h1>
<form method=post id="upload-form" enctype="multipart/form-data">
<input type="file" name="file" id="file-input">
<button type="submit">上傳</button>
</form>
<div id="progress-bar">
<div></div>
</div>
<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
var form = new FormData(this);
var xhr = new XMLHttpRequest();
var progressBar = document.querySelector('#progress-bar div');
xhr.open('POST', '/', true);
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
progressBar.style.width = percentComplete + '%';
progressBar.textContent = Math.round(percentComplete) + '%';
}
});
xhr.onloadstart = function() {
progressBar.style.width = '0%';
progressBar.textContent = '0%';
};
xhr.onloadend = function() {
if (xhr.status === 200) {
alert('上傳成功');
} else {
alert('上傳失敗');
}
};
xhr.send(form);
});
</script>
</body>
</html>
文件結(jié)構(gòu)
image.png
程序挺好玩也比較實用，方便手機直接將數(shù)據(jù)上傳至電腦。
