Python Web框架篇:Django文件上傳


上傳方式:

- Form表單上傳文件
- Ajax上傳文件
- 基於form表單和iframe自己實現ajax請求

1,創建項目

2,settings配置(注冊app01,static路徑等等這些)及url添加(略過)

3,views視圖函數

form的視圖收到了在request.FILES中的文件數據。從上述form來的數據可以通過request.FILES['file']來存取。
特別注意的是,只有當request方法是POST,且發送request的<form>有屬性enctype="multipart/form-data"時,request.FILES中包含文件數據,否則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():從文件中讀取整個上傳的數據,這個方法只適合小文件;

obj.chunks():按塊返回文件,通過在for循環中進行迭代,可以將大文件按塊寫入到服務器中;

obj.multiple_chunks():這個方法根據myFile的大小,返回True或者False,當myFile文件大於2.5M(默認為2.5M,可以調整)時,該方法返回True,否則返回False,因此可以根據該方法來選擇選用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的最大優點就是我們可以異步上傳一個二進制文件.

XMLHttpRequest 是一個API, 它為客戶端提供了在客戶端和服務器之間傳輸數據的功能。它提供了一個通過 URL 來獲取數據的簡單方式,並且不會使整個頁面刷新。這使得網頁只更新一部分頁面而不會打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 是一個 JavaScript 對象,它最初由微軟設計,隨后被 Mozilla、Apple 和 Google采納. 如今,該對象已經被 W3C組織標准化. 通過它,你可以很容易的取回一個URL上的資源數據. 盡管名字里有XML, 但 XMLHttpRequest 可以取回所有類型的數據資源,並不局限於XML。 而且除了HTTP ,它還支持file 和 ftp 協議.

語法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() 給當前FormData對象添加一個鍵/值對,name字段名稱.value字段值.可以是,或者一個字符串,如果全都不是,則該值會被自動轉換成字符串.
            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);//發送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應完全接受以后,該方法才會返回.
        }
    </script>
</body>
</html>

5.4 jQuery Ajax上傳,同時使用了iframe,一下代碼包含了兩種方法。即:

1-利用JQuery Ajax + FormData進行文件上傳
2-基於Iframe實現偽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實現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內部的內容
            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>

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM