一句題外話(huà)
昨天是老媽的生日卤材，可惜周一上班沒(méi)有辦法為她慶生震桶，只能電話(huà)問(wèn)候下。但還是在這里補(bǔ)說(shuō)一句“生日快樂(lè)搭儒！”(ps:我媽每天都會(huì)看我的公眾號(hào)，哈哈.....)
提個(gè)小需求
今天朋友說(shuō)提茁，之前寫(xiě)的文章Flask開(kāi)發(fā)vip版HttpServer淹禾，具備了httpserver的下載功能，比python原生的http服務(wù)好用多了茴扁，但能否再此基礎(chǔ)上添加一個(gè)文件上傳的功能呢铃岔？必須可以啊，正好復(fù)習(xí)下bootstrap和jQuery的相關(guān)知識(shí)峭火。
關(guān)于模態(tài)框
使用bootstrap實(shí)現(xiàn)點(diǎn)擊按鈕彈出窗口毁习，簡(jiǎn)直不要太簡(jiǎn)單。我們只需要將寫(xiě)好的窗口內(nèi)容隱藏躲胳，然后調(diào)用bootstrap的框架即可蜓洪，簡(jiǎn)單幾行就能完成相關(guān)功能實(shí)現(xiàn)....
前提條件是纤勒，我們需要引入bootstrap.min.js坯苹，直接上代碼看下準(zhǔn)備好的上傳文件彈框吧....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 模態(tài)框（Modal）插件</title>
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
文件上傳
</button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
請(qǐng)選擇所需上傳的本地文件
</h4>
</div>
<div class="modal-body">
<form id="upload-form" enctype="multipart/form-data">
<input id='file' class="btn btn-info" name="upload_file" type="file">
</form>
</div>
<div class="modal-footer">
<button id='upload' class="btn btn-primary ">上傳</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
jQuery事件與ajax
正常情況下，我們使用form表單進(jìn)行上傳文件摇天，需要在表單內(nèi)部添加一個(gè)type="submit"的按鈕粹湃，可如何才能像demo示例中的，將上傳按鈕置于頁(yè)面的任何位置來(lái)控制上傳呢泉坐？有jQuery在为鳄，就很簡(jiǎn)單...
<script>
$('#upload')
.click(function() {
$('#upload').submit();
})
</script>
由于是彈出窗口，我們選擇文件后腕让，點(diǎn)擊上傳孤钦，此時(shí)如果使用url_for()進(jìn)行頁(yè)面跳轉(zhuǎn)歧斟，有些不符合使用習(xí)慣，那么再加深一點(diǎn)偏形，引入ajax進(jìn)行異步提交好了静袖，那么全量的點(diǎn)擊事件就變?yōu)椋?/p>
<script>
$('#upload').click(function() {
var upload_path = $('#upload_path').text();
var formData = new FormData($('#upload-form')[0]);
formData.append("upload_path", upload_path);
$.post({
url: '/upload',
dataType: 'json',
type: 'POST',
data: formData,
async: true,
cashe: false,
contentType: false,
processData: false,
success: function(returndata) {
if (returndata['code'] == 200) {
var info = returndata['info']
alert(info);
}
},
error: function(returndata) {
alert("上傳失敗俊扭！")
}
})
});
</script>
關(guān)于js中使用Jinjia2
在js中直接使用jinjia2的模板引擎會(huì)報(bào)錯(cuò)...比如這樣：alert({{Book}});队橙，那么該怎么處理？
- bad
將內(nèi)容寫(xiě)在html中萨惑，然后通過(guò)js去獲染杩怠：
<p id="upload_path" style="display:none">{{path}}</p>
var upload_path = $('#upload_path').text();
- good
通過(guò)jinjia2的tojson過(guò)濾器，可以將變量轉(zhuǎn)為json字符串
var upload_path = {{path|tojson|safe}};
最終上傳實(shí)現(xiàn)
軟件整體效果如下：
The End
OK,今天的內(nèi)容就到這里庸蔼，如果覺(jué)得內(nèi)容對(duì)你有所幫助解总，可以點(diǎn)擊文章右下角的“在看”。
歡迎將這篇文章或我的微信公眾號(hào)【清風(fēng)Python】分享給更多喜歡python的人姐仅，謝謝倾鲫。
