Python Web框架之Django框架文件上傳功能詳解

更新時(shí)間：2019年08月16日 09:48:53 作者：寧生信

這篇文章主要介紹了Python Web框架之Django框架文件上傳功能,結(jié)合實(shí)例形式詳細(xì)分析了Django框架form表單基于ajax的文件上傳功能詳細(xì)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Python Web框架之Django框架文件上傳功能。分享給大家供大家參考，具體如下：

上傳方式：

- Form表單上傳文件
- Ajax上傳文件
- 基于form表單和iframe自己實(shí)現(xiàn)ajax請求

1，創(chuàng)建項(xià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"時(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) #讀取文件名稱和大小，返回后臺
    # 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請求上傳文件方法

涉及到兩個(gè)對象FormData和XMLHttpRequest

利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)"表單".比起普通的ajax,使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件.

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

XMLHttpRequest 是一個(gè) JavaScript 對象，它最初由微軟設(shè)計(jì),隨后被 Mozilla、Apple 和 Google采納. 如今,該對象已經(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對象添加一個(gè)鍵/值對,name字段名稱.value字段值.可以是,或者一個(gè)字符串,如果全都不是,則該值會被自動轉(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上傳，同時(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>測試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>

希望本文所述對大家基于Django框架的Python程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: