Python Web框架之Django框架文件上傳功能詳解
本文實例講述了Python Web框架之Django框架文件上傳功能。分享給大家供大家參考,具體如下:
上傳方式:
- Form表單上傳文件
- Ajax上傳文件
- 基于form表單和iframe自己實現(xiàn)ajax請求
1,創(chuàng)建項目
2,settings配置(注冊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"時,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) #讀取文件名稱和大小,返回后臺 # 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()
:從文件中讀取整個上傳的數(shù)據(jù),這個方法只適合小文件;
obj.chunks()
:按塊返回文件,通過在for循環(huán)中進(jìn)行迭代,可以將大文件按塊寫入到服務(wù)器中;
obj.multiple_chunks()
:這個方法根據(jù)myFile的大小,返回True或者False,當(dāng)myFile文件大于2.5M(默認(rèn)為2.5M,可以調(diào)整)時,該方法返回True,否則返回False,因此可以根據(jù)該方法來選擇選用read方法讀取還是采用chunks方法
obj.name
:這是一個屬性,不是方法,該屬性得到上傳的文件名,包括后綴,如123.exe;
obj.size
:這也是一個屬性,該屬性得到上傳文件的大小。
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請求上傳文件方法
涉及到兩個對象FormData和XMLHttpRequest
利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()
方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進(jìn)制文件.
XMLHttpRequest 是一個API, 它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個通過 URL 來獲取數(shù)據(jù)的簡單方式,并且不會使整個頁面刷新。這使得網(wǎng)頁只更新一部分頁面而不會打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。
XMLHttpRequest 是一個 JavaScript 對象,它最初由微軟設(shè)計,隨后被 Mozilla、Apple 和 Google采納. 如今,該對象已經(jīng)被 W3C組織標(biāo)準(zhǔn)化. 通過它,你可以很容易的取回一個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對象添加一個鍵/值對,name字段名稱.value字段值.可以是,或者一個字符串,如果全都不是,則該值會被自動轉(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ā)送請求. 如果該請求是異步模式(默認(rèn)),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應(yīng)完全接受以后,該方法才會返回. } </script> </body> </html>
5.4 jQuery Ajax上傳,同時使用了iframe,一下代碼包含了兩種方法。即:
- 1-利用JQuery Ajax + FormData進(jìn)行文件上傳
- 2-基于Iframe實現(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>測試Iframe功能</h1> <input type="text" id="url" /> <input type="button" value="點我" onclick="iframeChange();" /> <iframe id="ifr" src=""></iframe> <hr/> <h1>基于iframe實現(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>
希望本文所述對大家基于Django框架的Python程序設(shè)計有所幫助。
相關(guān)文章
python使用openCV遍歷文件夾里所有視頻文件并保存成圖片
這篇文章主要介紹了python使用openCV遍歷文件夾里所有視頻文件并保存成圖片,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2020-01-01Pycharm學(xué)習(xí)教程(5) Python快捷鍵相關(guān)設(shè)置
這篇文章主要為大家詳細(xì)介紹了最全的Pycharm學(xué)習(xí)教程第五篇,Python快捷鍵相關(guān)設(shè)置,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Python實現(xiàn)獲取當(dāng)前目錄下文件名代碼詳解
這篇文章主要介紹了Python實現(xiàn)獲取當(dāng)前目錄下文件名,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03Python元組 tuple的概念與基本操作詳解【定義、創(chuàng)建、訪問、計數(shù)、推導(dǎo)式等】
這篇文章主要介紹了Python元組 tuple的概念與基本操作,結(jié)合實例形式詳細(xì)分析了Python元組的定義、創(chuàng)建、訪問、計數(shù)、推導(dǎo)式等常見操作技巧與操作注意事項,需要的朋友可以參考下2019-10-10Python對list列表結(jié)構(gòu)中的值進(jìn)行去重的方法總結(jié)
這篇文章主要介紹了Python對列表list中的值進(jìn)行去重的方法總結(jié),文中給出的方法都能保持去重后的順序不發(fā)生改變,需要的朋友可以參考下2016-05-05ubuntu16.04制作vim和python3的開發(fā)環(huán)境
本文給大家介紹的是在ubuntu系統(tǒng)下制作python3開發(fā)環(huán)境的詳細(xì)步驟,非常的實用,有需要的小伙伴可以參考下2018-09-09