Python Web框架之Django框架文件上傳功能詳解
本文實(shí)例講述了Python Web框架之Django框架文件上傳功能。分享給大家供大家參考，具體如下：
上傳方式：
- Form表單上傳文件
- Ajax上傳文件
- 基于form表單和iframe自己實(shí)現(xiàn)ajax請(qǐng)求
1，創(chuàng)建項(xiàng)目
2，settings配置（注冊(cè)app01，static路徑等等這些）及url添加（略過）
3，views視圖函數(shù)
form的視圖收到了在request.FILES中的文件數(shù)據(jù)。從上述form來的數(shù)據(jù)可以通過request.FILES['file']來存取。
特別注意的是，只有當(dāng)request方法是POST，且發(fā)送request的<form>有屬性enctype="multipart/form-data"時(shí)，request.FILES中包含文件數(shù)據(jù)，否則request.FILES為空。
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json
import os
def upload(request):
if request.method == 'GET':
img_list = models.Img.objects.all()
return render(request,'upload.html',{'img_list': img_list})
elif request.method == "POST":
user = request.POST.get('user')
fafafa = request.POST.get('fafafa')
obj = request.FILES.get('fafafa')
# print(obj.name,obj.size) #讀取文件名稱和大小，返回后臺(tái)
# print(user,fafafa)
file_path = os.path.join('static','upload',obj.name)
f = open(file_path, 'wb')
for chunk in obj.chunks():
f.write(chunk)
f.close()
models.Img.objects.create(path=file_path)
ret={'status':True,'path':file_path}
return HttpResponse(json.dumps(ret))
4，文件操作方法
obj.read()：從文件中讀取整個(gè)上傳的數(shù)據(jù)，這個(gè)方法只適合小文件；
obj.chunks()：按塊返回文件，通過在for循環(huán)中進(jìn)行迭代，可以將大文件按塊寫入到服務(wù)器中；
obj.multiple_chunks()：這個(gè)方法根據(jù)myFile的大小，返回True或者False，當(dāng)myFile文件大于2.5M(默認(rèn)為2.5M，可以調(diào)整)時(shí)，該方法返回True，否則返回False，因此可以根據(jù)該方法來選擇選用read方法讀取還是采用chunks方法
obj.name：這是一個(gè)屬性，不是方法，該屬性得到上傳的文件名，包括后綴，如123.exe；
obj.size：這也是一個(gè)屬性，該屬性得到上傳文件的大小。
5.1 form 上傳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="POST" action="/upload.html" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form>
<div>
{% for item in img_list %}
<img style="height: 200px;width: 200px;" src="/{{ item.path }}" />
{% endfor %}
</div>
</body>
</html>
5.2 原生的ajax Http請(qǐng)求上傳文件方法
涉及到兩個(gè)對(duì)象FormData和XMLHttpRequest
利用FormData對(duì)象,我們可以通過JavaScript用一些鍵值對(duì)來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)"表單".比起普通的ajax,使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件.
XMLHttpRequest 是一個(gè)API, 它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個(gè)通過 URL 來獲取數(shù)據(jù)的簡(jiǎn)單方式，并且不會(huì)使整個(gè)頁面刷新。這使得網(wǎng)頁只更新一部分頁面而不會(huì)打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。
XMLHttpRequest 是一個(gè) JavaScript 對(duì)象，它最初由微軟設(shè)計(jì),隨后被 Mozilla、Apple 和 Google采納. 如今,該對(duì)象已經(jīng)被 W3C組織標(biāo)準(zhǔn)化. 通過它,你可以很容易的取回一個(gè)URL上的資源數(shù)據(jù). 盡管名字里有XML, 但 XMLHttpRequest 可以取回所有類型的數(shù)據(jù)資源，并不局限于XML。 而且除了HTTP ,它還支持file 和 ftp 協(xié)議.
語法var myRequest = new XMLHttpRequest();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="container">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div>
<input type="file" id="imgs" />
<input type="button" value="提交" onclick="UploadXML()" />
<script>
function UploadXML() {
var dic = new FormData();
dic.append('user', 'v1');//append() 給當(dāng)前FormData對(duì)象添加一個(gè)鍵/值對(duì),name字段名稱.value字段值.可以是,或者一個(gè)字符串,如果全都不是,則該值會(huì)被自動(dòng)轉(zhuǎn)換成字符串.
dic.append('fafafa', document.getElementById('imgs').files[0]);
console.log(dic);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
if(obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
document.getElementById("imgs").appendChild(img);
}
}
};
xml.send(dic);//發(fā)送請(qǐng)求. 如果該請(qǐng)求是異步模式(默認(rèn)),該方法會(huì)立刻返回. 相反,如果請(qǐng)求是同步模式,則直到請(qǐng)求的響應(yīng)完全接受以后,該方法才會(huì)返回.
}
</script>
</body>
</html>
5.4 jQuery Ajax上傳，同時(shí)使用了iframe，一下代碼包含了兩種方法。即：
- 1-利用JQuery Ajax + FormData進(jìn)行文件上傳
- 2-基于Iframe實(shí)現(xiàn)偽Ajax 上傳文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
<script>
function li(arg) {
console.log(arg);
}
</script>
</head>
<body>
<h1>測(cè)試Iframe功能</h1>
<input type="text" id="url" />
<input type="button" value="點(diǎn)我" onclick="iframeChange();" />
<iframe id="ifr" src=""></iframe>
<hr/>
<h1>基于iframe實(shí)現(xiàn)form提交</h1>
<form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
<iframe style="display: none" id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" />
</form>
<h1>圖片列表</h1>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div>
<input type="file" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
function UploadXML() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
if(obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
document.getElementById("imgs").appendChild(img);
}
}
};
xml.send(dic);
}
function Uploadjq() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
$.ajax({
url: '/upload.html',
type: 'POST',
data: dic,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType: 'JSON',
success: function (arg) {
if (arg.status){
var img = document.createElement('img');
img.src = "/" + arg.path;
$('#imgs').append(img);
}
}
})
}
function iframeChange() {
var url = $('#url').val();
$('#ifr').attr('src', url);
}
function loadIframe() {
console.log(1);
// 獲取iframe內(nèi)部的內(nèi)容
var str_json = $('#iframe_1').contents().find('body').text();
var obj = JSON.parse(str_json);
if (obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
$('#imgs').append(img);
}
}
</script>
</body>
</html>
希望本文所述對(duì)大家基于Django框架的Python程序設(shè)計(jì)有所幫助。
相關(guān)文章
python使用openCV遍歷文件夾里所有視頻文件并保存成圖片
這篇文章主要介紹了python使用openCV遍歷文件夾里所有視頻文件并保存成圖片，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-01
這篇文章主要介紹了python 如何對(duì)logging日志封裝，幫助大家更好的理解和使用python，感興趣的朋友可以了解下2020-12-12
Pycharm學(xué)習(xí)教程（5） Python快捷鍵相關(guān)設(shè)置
這篇文章主要為大家詳細(xì)介紹了最全的Pycharm學(xué)習(xí)教程第五篇，Python快捷鍵相關(guān)設(shè)置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
python實(shí)現(xiàn)excel公式格式化的示例代碼
這篇文章主要介紹了python實(shí)現(xiàn)excel公式格式化的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Python實(shí)現(xiàn)獲取當(dāng)前目錄下文件名代碼詳解
這篇文章主要介紹了Python實(shí)現(xiàn)獲取當(dāng)前目錄下文件名，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了python和JavaScript通信，js和python是兩種語言,js處理網(wǎng)頁數(shù)據(jù),python可作為服務(wù)端開發(fā),兩者通過websocket進(jìn)行通信，下文具體操作內(nèi)容需要的小伙伴可以參考一下2022-04-04
Python元組 tuple的概念與基本操作詳解【定義、創(chuàng)建、訪問、計(jì)數(shù)、推導(dǎo)式等】
這篇文章主要介紹了Python元組 tuple的概念與基本操作,結(jié)合實(shí)例形式詳細(xì)分析了Python元組的定義、創(chuàng)建、訪問、計(jì)數(shù)、推導(dǎo)式等常見操作技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
pytorch中的transforms模塊實(shí)例詳解
今天小編就為大家分享一篇pytorch中的transforms模塊實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-12-12
Python對(duì)list列表結(jié)構(gòu)中的值進(jìn)行去重的方法總結(jié)
這篇文章主要介紹了Python對(duì)列表list中的值進(jìn)行去重的方法總結(jié),文中給出的方法都能保持去重后的順序不發(fā)生改變,需要的朋友可以參考下2016-05-05
ubuntu16.04制作vim和python3的開發(fā)環(huán)境
本文給大家介紹的是在ubuntu系統(tǒng)下制作python3開發(fā)環(huán)境的詳細(xì)步驟，非常的實(shí)用，有需要的小伙伴可以參考下2018-09-09