2. 程式人生 > >通過Django的form及Ajax等多種方式上傳檔案

通過Django的form及Ajax等多種方式上傳檔案

阿新 • • 發佈：2018-12-15

如下效果：

方式一、通過Django的Form方式上傳檔案

思路：前臺html建立Form，根據格式要求完善form內標籤屬性；提交後臺後，後臺獲取前臺傳來的資料進行處理：檔案路徑儲存至資料庫，檔案內容儲存至本地資料夾中；後臺處理完成後重新整理前臺頁面。

1、建立空白Django專案，過程忽略。

2、靜態html頁面設定：

<form action="/upload.html" method="post" enctype="multipart/form-data">
    <input type="text" name="fileName">
    <input type="file" name="fileContent">
    <input type="submit" value="提交">
</form>

寫一個form表單，三個關鍵標籤：text、file、submit，分別存新的檔名、檔案內容、提交按鈕，由於是檔案上傳因此form中enctype需要設定成multipart/form-data。

3、views後臺設定：

from django.shortcuts import render,redirect
import os

def Upload(request):
   if request.method=="GET":
      
        return render(request,"upload.html")
    elif request.method=="POST":
        # 獲取普通input標籤值，即檔名
        filname=request.POST.get('fileName')
        # 獲取file型別的input標籤值，即檔案內容
        file=request.FILES.get('fileContent')

        # 獲取檔案字尾名
        postfix=file.name.split('.')[1]
        # 設定本地檔案路徑
        file_path=os.path.join('static',filname+'.'+postfix)


        # 將上傳的檔案寫入本地目錄
        f=open(file_path,"wb")
        for chunk in file.chunks():
            f.write(chunk)
        f.close()


        return redirect("upload.html")

url檔案配置：

from Upload import views

urlpatterns = [
   
    path('upload.html',views.Upload),
]

原理：

（1）、當Get請求時，即瀏覽器開啟該網頁時，顯示上傳頁面；

（2）、當POST請求時，即點選“提交”按鈕時：

①、獲取介面傳過來的新的檔名及檔案內容。

②、分塊讀取檔案內容，並寫入到本地目錄。

4、頁面上動態顯示剛剛上傳的圖片，需做如下改造：

（1）、新建資料庫表，用來儲存圖片路徑：

# 圖片類
class image(models.Model):
    # 路徑
    file_Path=models.CharField(max_length=32)

（2）、在上傳成功時將檔案路徑儲存至資料庫，即在views的檢視方法的POST中的儲存檔案後面新增程式碼：

   # 寫入成功後將路徑儲存至資料庫
        models.image.objects.create(file_Path=file_path)

（3）、頁面重新整理時展現圖片，即在檢視方法的GET中讀取資料庫中新增的圖片路徑，並將其返給html頁面：

 if request.method=="GET":
        # 獲取所有圖片
        imgs=models.image.objects.all()
        return render(request,"upload.html",{"imgs":imgs})

（4）、html頁面中增加

<div class="imgs">
    {% for obj in imgs %}
         <img src="{{ obj.file_Path }}">
    {% endfor %}
</div>

（5）、由於Django對靜態檔案瀏覽的限制，需要在配置中新增：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static"),
]

方式二、通過原生js實現

思路：html頁面，通過FormData承載圖片內容，並通過原生的XMLHttpRequest將頁面全部資訊傳輸到後臺views中；後臺views接收後處理並將結果通過json形式返回給前臺html頁面；前臺html頁面接收到字串內容後轉換為json物件；建立圖片標籤，並將接收到的圖片地址賦值。

1、url配置如下：

from Upload import views

urlpatterns = [
   
    path('uploadjs.html', views.Upload_js),

]

2、views檢視函式：

def Upload_js(request):
    if request.method == "GET":
        # 獲取所有圖片
        imgs = models.image.objects.all()
        return render(request, "upload_js.html", {"imgs": imgs})
    elif request.method == "POST":
        # 獲取普通input標籤值，即檔名
        filname = request.POST.get('fileName')
        # 獲取file型別的input標籤值，即檔案內容
        file = request.FILES.get('fileContent')

        # 獲取檔案字尾名
        postfix = file.name.split('.')[1]
        # 設定本地檔案路徑
        file_path = os.path.join('static', filname + '.' + postfix)

        # 將上傳的檔案寫入本地目錄
        f = open(file_path, "wb")
        for chunk in file.chunks():
            f.write(chunk)
        f.close()

        # 寫入成功後將路徑儲存至資料庫
        models.image.objects.create(file_Path=file_path)

        #將狀態及檔案路徑通過json形式返回至html頁面
        ret={'status':True,'path':file_path}
        return HttpResponse(json.dumps(ret))

3、前臺html頁面

<body>

    <input type="text" name="fileName" id="fileName">
    <input type="file" name="fileContent" id="fileContent">
    <input type="button" value="提交" onclick="upload();">

<div class="imgs">
    {% for obj in imgs %}
         <img src="{{ obj.file_Path }}">
    {% endfor %}
</div>

<script>
    function upload() {
        //建立FormData用於儲存檔案內容
        var dict=new FormData();
        dict.append("fileName",document.getElementById('fileName').value);
        dict.append("fileContent",document.getElementById('fileContent').files[0]);


        var xml=new XMLHttpRequest();
        //uploadjs.html即url.py中配置的後臺views
        xml.open("post",'/uploadjs.html',true);
        xml.onreadystatechange=function(){
            if (xml.readyState==4 && xml.status==200) {
                //傳輸成功時將檢視返回回來的內容通過json接收
                var obj=JSON.parse(xml.responseText);
                if(obj.status){
                    //建立圖片標籤，並將後臺傳回來的圖片地址加上，顯示在頁面中
                    var img=document.createElement('img');
                    img.src='/'+obj.path;
                    document.getElementsByClassName('imgs')[0].appendChild(img);
                }
            }
        };

        xml.send(dict)
    }
</script>
</body>

方式三、通過JQuery實現

原理：將方式二中原生js部分改為JQuery形式，其他無變化。

html頁面程式碼如下：

<body>

    <input type="text" name="fileName" id="fileName">
    <input type="file" name="fileContent" id="fileContent">
    <input type="button" value="提交" onclick="upload();">

<div class="imgs">
    {% for obj in imgs %}
         <img src="{{ obj.file_Path }}">
    {% endfor %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    function upload() {
        //建立FormData用於儲存檔案內容
        var dict=new FormData();
        dict.append("fileName",document.getElementById('fileName').value);
        dict.append("fileContent",document.getElementById('fileContent').files[0]);


      $.ajax({
          url:'/uploadjq.html',
          type:'post',
          data:dict,
          processData: false,// 告訴jQuery不要去處理髮送的資料(必須設定)
　　　　　 contentType: false, // 告訴jQuery不要去設定Content-Type請求頭（必須設定）
          dataType:'JSON',
          success:function (arg) {
            if(arg.status){
               //建立圖片標籤，並將後臺傳回來的圖片地址加上，顯示在頁面中
                    var img=document.createElement('img');
                    img.src='/'+arg.path;
                    $('.imgs')[0].appendChild(img);
            }
          }
      })
    }
</script>
</body>

注意：由於使用的是FormData物件，需要將processData、contentType設定成false,至於為什麼要這麼設定，詳見：

方式四、通過iframe及form表單，views後臺程式碼與方式二一致

原理：將views後臺返回的資料傳給iframe頁面標籤，觸發iframe的onload事件時實現img圖片動態載入。

1、原生js時，獲取iframe物件內容通過document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')；contentWindow代表frame和iframe內部的視窗物件。html前臺頁面如下：

<body>
<form action="/uploadiframe.html" method="post" enctype="multipart/form-data" target="img_igrame">
    <iframe id="img_igrame" name="img_igrame" onload="loadiframe(this)"  ></iframe>
    <input type="text" name="fileName">
    <input type="file" name="fileContent">
    <input type="submit" value="提交">
</form>
<div class="imgs">
    {% for obj in imgs %}
         <img src="{{ obj.file_Path }}">
    {% endfor %}
</div>

<script>

    function loadiframe(self) {

            // 獲取iframe內部的內容
           var str_json=self.contentWindow.document.getElementsByTagName('body')[0].innerText;
            var obj = JSON.parse(str_json);
            if (obj.status){
                var img = document.createElement('img');
                img.src = "/" + obj.path;
                document.getElementsByClassName('imgs')[0].appendChild(img);
               
            }

    }
</script>

</body>

2、jQuery時，通過.contents() 方法；.contents() 方法允許我們檢索 DOM 樹中的這些元素的直接子節點，並用匹配元素構造新的 jQuery 物件。.contents() 和 .children() 方法類似，不同的是前者在結果 jQuery 物件中包含了文字節點以及 HTML 元素。.contents() 方法也可以用於獲得 iframe 的內容文件，前提是該 iframe 與主頁面在同一個域。程式碼如下：

<body>
<form action="/uploadiframe.html" method="post" enctype="multipart/form-data" target="img_igrame">
    <iframe id="img_igrame" name="img_igrame" onload="loadiframe(this)"  ></iframe>
    <input type="text" name="fileName">
    <input type="file" name="fileContent">
    <input type="submit" value="提交">
</form>
<div class="imgs">
    {% for obj in imgs %}
         <img src="{{ obj.file_Path }}">
    {% endfor %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    function loadiframe(self) {

            // 獲取iframe內部的內容
            var str_json = $('#img_igrame').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>

=======

總結：

通過Django的Form方式上傳檔案，簡單，但無法區域性重新整理實現ajax效果；

通過js或jQuery方式，需要使用FormData物件，仍有些瀏覽器不相容；

通過Form+iframe方式上傳檔案，相容性最好。

相關推薦

通過Django的form及Ajax等多種方式上傳檔案

如下效果： 方式一、通過Django的Form方式上傳檔案 思路：前臺html建立Form，根據格式要求完善form內標籤屬性；提交後臺後，後臺獲取前臺傳來的資料進行處理：檔案路徑儲存至資料庫，檔案內容儲存至本地資料夾中；後臺處理完成後重新整理前臺頁面。 1

H5 通過Ajax方式上傳檔案 使用FormData進行Ajax請求

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

通過Ajax方式上傳檔案

XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData物件,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制元件,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個"表單".比起普通的ajax,使用FormData的最大

AJAX POST方式上傳檔案到後臺和下載後臺傳來的檔案

ajax 下載 原本ajax是不能下載檔案的，原因：因為response，一般請求瀏覽器是會處理伺服器輸出的response，例如生成png、檔案下載等,然而ajax請求只是個“字元型”的請求，即請求的內容是以文字型別存放的。檔案的下載是以二進位制形式進行的，雖然可以讀取到返

Ajax使用FormData物件上傳檔案的兩種方式

以下是Demo的專案結構:主要就是一個servlet3.0和一個jsp頁面 由於使用的是servlet3.0,所以無需配置web.xml,以下是idnex.jsp頁面： <%@ page language="java" contentType="

通過jQuery Ajax使用FormData物件上傳檔案

FormData物件，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest傳送這個"表單"。在 Mozilla Developer 網站 使用FormData物件 有詳盡的FormData物件使用說明。但上傳檔案部分只有底層的XMLHttpRequest物件傳送上傳請求，那麼怎

python 通過post方式上傳檔案到php伺服器

看了網上很多程式碼，都沒有說如何具體的使用poster,試了兩天，終於成功了 通過python呼叫php實現了檔案上傳 與大家分享一下：     首先要通過pip安裝poster(easy_install 也是一樣的）：

php5.6關於curl以＠方式上傳檔案的變化及解決七牛上傳時報file is not specified in multipart的問題

$ch = curl_init (); $fields = $params;         $fields ['file'] = '@' . $file;   curl_setopt ( $ch, CURLOPT_URL, $u

前端 - jquery方式 / iframe +form 方式 上傳檔案

環境與上一章一樣 jquery 方式上傳檔案: HTML程式碼 {#html程式碼開始#} <input type="file" id="img" > <button onclick="a1()">提交</button> {#

關於requests Post方式上傳檔案

背景 前兩天需要呼叫一個介面，使用post方式上傳檔案。於是使用Python的requests進行傳送post請求，但是一直報伺服器500的錯誤，感覺很納悶，折磨我好久之後才注意到之前使用的post請求只是攜帶一些欄位，而這次是需要向介面上傳檔案。 步驟 先這樣，，，再這樣，，，

阿里雲oss springMVC+ajax後臺和前端上傳檔案

oss上傳檔案 後臺上傳 前端ajax程式碼，傳入一個input物件 function uploadFileOss(input, callback) { var form = $("<form></form>"); form.append($(

FastDFS的配置、部署與API使用解讀（2）以位元組方式上傳檔案的客戶端程式碼

本文來自 詩商·柳驚鴻 Poechant CSDN部落格，轉載請註明源地址：FastDFS的配置、部署與API使用解讀（2）上傳檔案到FastDFS分散式檔案系統的客戶端程式碼 在閱讀本文之前，請您先通過《FastDFS的配置、部署與API使用解讀（1）Get Start

ajax頁面無重新整理上傳檔案

最近在研究struts2檔案上傳，感覺這塊無論是做企業網站還是做系統都用的挺多的，尤其是圖片上傳。但是上傳我們又有幾種方式，一種是表單提交，一種是ajax無重新整理上傳。 這次我要介紹的就是struts2+ajax無重新整理上傳圖片，將圖片儲存在本地，圖片將以

ASP.NET 利用post方式上傳檔案

幾經努力，終於實現了檔案上傳，不使用asp.net元件，而使用傳統asp檔案模板方式，方法如下： 上傳檔案介面模板：(upfile.htm)HTML如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

關於C++使用libcurl提交表單方式上傳檔案時提交表單引數[同HTML表單]

       C++與Java後臺互動，避免不了使用HTTP協議，這時候對於C++來說libcurl就派上用場了，簡單的引數傳遞比較簡單，涉及到檔案上傳和下載的時候就稍微複雜點了，具體示例如下： int http_post_file(const char *url, c

採用Retrofit的PUT方式上傳檔案到apache

概述 前段時間搭建了FastDFS用作檔案儲存，既然是檔案儲存，必然需要有檔案才能儲存。檔案可能是由客戶端傳遞上去，可以是視訊、也可以是圖片等。現在需要提供一個Android端傳遞視訊檔案的功能，一說到這，大家肯定想說，okhttp現實一個post表單就搞定了

ASP 使用 jQuery Ajax File Uploader外掛上傳檔案（適用於支援H5的瀏覽器）

  開篇先吐個槽：自從公司策略調整以後，幾乎沒有什麼3D、AR、VR的專案讓我來做了~於是···為了避免被認為無所事事， 只好硬著頭皮開始做ASP的專案了~~好在大家用的都是C# ┐(´∀｀)┌ 迴歸正題，當前接手的ASP專案是執行在微信平臺的一個上傳視訊投票的小專案，裡面

流的方式上傳檔案

package com.baoyi.MyTest; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.F

Java的Post方式上傳檔案

不說廢話，直接上程式碼： public void moveWaterMark(String fileName) { try { File imgFile =

JQuery Ajax使用FormData物件上傳檔案 圖片

通過jQuery Ajax使用FormData物件上傳檔案FormData物件，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest傳送這個"表單"。在 Mozilla D