Python?flask使用ajax上傳文件的示例代碼
前言
JS
為什么要用ajax來提交
在使用from提交時,瀏覽器會向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。
為安全起見,即file-upload 元素不允許 HTML 作者或 JavaScript 程序員指定一個默認(rèn)的文件名。HTML value 屬性被忽略,并且對于此類元素來說,value屬性是只讀的,這意味著只有用戶可以輸入一個文件名。當(dāng)用戶選擇或編輯一個文件名時,file-upload 元素觸發(fā) onchange 事件句柄。
利用form提交會導(dǎo)致頁面刷新,體驗不好,所以使用AJAX進(jìn)行文件上傳是個不錯的選擇。但這需要我們自己來組織通過POST請求發(fā)送的內(nèi)容
FormData對象
通過FormData對象可以組裝一組用 XMLHttpRequest發(fā)送請求的鍵/值對。它可以更靈活方便的發(fā)送表單數(shù)據(jù),因為可以獨立于表單使用。如果你把表單的編碼類型設(shè)置為multipart/form-data ,則通過FormData傳輸?shù)臄?shù)據(jù)格式和表單通過submit() 方法傳輸?shù)臄?shù)據(jù)格式相同。 —— MDN web docs
Form的enctype屬性
enctype這個屬性管理的是表單的MIME編碼,它一共有三個屬性:
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在發(fā)送前編碼所有字符(默認(rèn)) |
| multipart/form-data | 不對字符編碼,用來制定傳輸數(shù)據(jù)的特殊類型,如mp3、jpg |
| text/plain | 純文本傳輸 |
Input
| value | 保存了用戶指定的文件的名稱 |
|---|---|
| type=“file” | 設(shè)置input類型為file |
| multiple=“multiple” | 可多選,不設(shè)置為單選 |
| accept=“…” | 設(shè)置可選文件的MIME_type。在設(shè)置之后點擊選擇文件按鈕會默認(rèn)顯示符合設(shè)置的MIME_type的文件(存在兼容性)。具體的文件類型對應(yīng)的MIME類型可以搜索到,這里列出我用到的類型: |
MIME類型(更多直接百度,類型超乎你的想想)
| 文件類型 | MIME類型 |
|---|---|
| .txt | text/plain |
| application/pdf | |
| .doc | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .xls | application/vnd.ms-excel |
| .ppt | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
上傳單個文件
html代碼部分
<form id="uploadForm" method="post" enctype="multipart/form-data"> <label >上傳電子書</label> <input type="file" name="file" > <button id="upload" type="button" name="button" >上傳</button> </br> </br> </br> </form>
javascript代碼部分
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
$("#upload").click(function(){
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "{{ url_for('.regression_report') }}", //上傳文件的請求路徑必須是絕對路勁
data: formData,
cache: false,
processData: false,
contentType: false,
success:function(data){
// 這里是訪問成功時被自動執(zhí)行的代碼
// 拆分返回值信息(具體返回什么東西就看視圖函數(shù)中定義的json格式)
status_ret = data.status;
errmsg_ret = data.errmsg;
layer.msg(errmsg_ret);
switch (status_ret){
case 0:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
default:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
}
},
error:function(jqXHR){
// 這里是訪問失敗時被自動調(diào)用的代碼
}
});
});
</script>
當(dāng)你的頁面樣式比較多的時候,可能上述方法無法傳入文件,下面這種方法比較強(qiáng),推薦看看
<form class="info" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>File upload</label>
<input id="id_regression_html" type="file" name="regression_html" class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info" disabled="" placeholder="Upload Regression.html">
<span class="input-group-append">
<button id="html_upload" class="file-upload-browse btn btn-gradient-primary" type="button">Html Upload</button>
</span>
</div>
</div>
<button id="id_ajax_submit" type="button" class="btn btn-gradient-primary mr-2">Submit</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
$("#id_ajax_submit").click(function(){
// var formData = new FormData($('#uploadForm')[0]);
let formData = new FormData();
let my_file = document.getElementById('id_regression_html');
// @Param: <input name="regression_html">
// @Param: myFile.file[0]為第一個文件(單選),多個文件(多選)則要循環(huán)添加
formData.append('regression_html',my_file.files[0]);
$.ajax({
type: 'post',
url: "{{ url_for('.regression_report') }}", //上傳文件的請求路徑必須是絕對路勁
data: formData,
cache: false,
async: false,
processData: false, //告訴jquery不要處理發(fā)送的數(shù)據(jù)
contentType: false, //告訴jquery不要設(shè)置content-Type請求頭
success:function(data){
// 這里是訪問成功時被自動執(zhí)行的代碼
// 拆分返回值信息(具體返回什么東西就看視圖函數(shù)中定義的json格式)
status_ret = data.status;
errmsg_ret = data.errmsg;
layer.msg(errmsg_ret);
switch (status_ret){
case 0:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
case 1:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
default:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
}
},
error:function(jqXHR){
// 這里是訪問失敗時被自動調(diào)用的代碼
}
});
});
</script>
flask 視圖函數(shù)部分
@admin_blu.route("/toolReg", methods=['GET', 'POST'])
def regression_report():
if request.method == "GET":
return render_template('index.html')
elif request.method == "POST":
# TODO: 獲取設(shè)置
# TODO: 獲取文件
f = request.files.get('file')
if f and f.filename.__contains__('.html'):
upload_path = os.path.join(current_app.root_path, 'static/upload/html', f.filename) download_path = os.path.join(current_app.root_path, 'static/upload/html', 'xlsx')
# TODO: 類實例化,同步執(zhí)行
f.save(upload_path)
ret = {
"status": 0,
"errmsg": "上傳成功"
}
return jsonify(ret)
return redirect(url_for(".index.html"))
上傳多個文件
html
<form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file" multiple="multiple" /> </form> <button id="btnUpload">上傳文件</button>
js
<script>
$("#btnUpload").on("click", function(){
var formdata = new FormData($("#uploadForm")[0]);
alert(formdata);
$.ajax({
type: "post",
url: "/Attendance/UploadFile2/",//url地址
contentType: false,
cache: false,
processData: false,
data: formdata,
success: function (data) {
console.log(data);
}
});
});
</script>
出問題解決方案
//將formdata改用下面的方式試下
var formdata = new FormData();
var files = $("input[type='file']")[0].files;
for (var i = 0; i < files.length; i++) {
formdata.append("file", files[i]);
}
到此這篇關(guān)于Python flask使用ajax上傳文件的文章就介紹到這了,更多相關(guān)Python flask上傳文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Python實現(xiàn)多條件篩選Excel數(shù)據(jù)并批量繪制直方圖
這篇文章主要為大家介紹了如何Python對Excel數(shù)據(jù)進(jìn)行多條件篩選和去除并批量繪制直方圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-09-09
Python中隨機(jī)數(shù)生成random庫實戰(zhàn)
本文介紹了Python的random庫,介紹了生成隨機(jī)整數(shù)、浮點數(shù)、序列隨機(jī)抽樣等基本功能,以及設(shè)置隨機(jī)種子、控制概率分布等高級技巧,通過多個實用示例,感興趣的可以了解一下2024-11-11
一篇文章帶你學(xué)習(xí)python的函數(shù)與類
這篇文章主要為大家介紹了python的函數(shù)與類,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01
openstack中的rpc遠(yuǎn)程調(diào)用的方法
今天通過本文給大家分享openstack中的rpc遠(yuǎn)程調(diào)用的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-07-07
Python with語句上下文管理器兩種實現(xiàn)方法分析
這篇文章主要介紹了Python with語句上下文管理器兩種實現(xiàn)方法,結(jié)合實例形式較為詳細(xì)的分析了Python上下文管理器的相關(guān)概念、功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-02-02

