Django+Jquery+Bootstrap Modal+Iframe使用非同步機制上傳檔案實現方法

阿新 • • 發佈：2019-01-21

需求：

1. 現在有一個採用Jquery + Bootstrap做前端，Django+Apache做後端的站點；

2. 使用Bootstrap Modal彈出模態框提示使用者上傳檔案，點選上傳按鈕後，不重新整理當前頁面的情況下提示上傳結果（“成功”|“失敗”），然後關閉模態框(下稱Modal)。

思路：

一、基於以下原因需要使用Iframe：

1. Django1.6之後的版本上傳檔案需要使用 csrf_token 才能成功上傳（當然，如果關閉csrf也行，不過站點安全性大打折扣），採用AJAX或者Jquery Post方式沒有辦法模擬出這個變數；

2. Post了之後，動態捕獲Django返回的結果，如果不使用Iframe，只能重新整理頁面。

因此需要使用Iframe，用的時候把這個Iframe大小置為0就好了，不會影響顯示。

二、Modal是疊加在父頁面上的，Iframe裡面沒有辦法呼叫 $('#modalid').modal('hide') 方法來關閉父頁面的Modal，所以需要在父頁面的js中定義一個自定義函式用來關閉這個已經開啟的Modal。

三、父頁面很有可能是通過js檔案的方式載入js指令碼的，因此沒有辦法直接採用 parent.FunctionName() 的方式來呼叫自定義函式，所以在父頁面需要定義一個按鈕，採用click來觸發自定義函式（當然，方法是多種多樣的，也可以定義一個input，採用trigger('change')的方法來啟用change事件）。

實現：

瞭解了思路之後，就是實現的步驟了：

一、Html檔案：

index.html，Modal-body裡面的程式碼片段：

<div class="form-group">
  <form method="POST" role="form" enctype="multipart/form-data" id="UploadFileForm" target="ResultFrame">
    {% csrf_token %}
    <div class="form-group">
      <label for="FileToUpload">請選擇檔案</label>
      <input type="file" class="form-control" id="FileToUpload" name="FileToUpload">
    </div>
  </form>
  <iframe name="ResultFrame" id="ResultFrame" width="1" height="1" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
  </iframe>
</div>

<button type="button" class="btn btn-primary hidden" id="GetResultBtn" style="display:none;">獲取結果</button>

註釋：

1. form裡面需要加上一個指向Iframe的target：target="ResultFrame"；

2. 預設iframe完全為空，可以定義大小為0，也可以加上隱藏的樣式，等下Django反饋的時候就會載入內容了；

3. 這個“獲取結果”的button，隨意加在哪裡都成，也是隱藏的；

題外話：

採用Django上傳檔案，需要滿足的條件或者說需要怎麼做(csrf之類的話題)，可以看我另外一篇文章：

-------------文章還沒有寫（^_^）

UploadFileResult.html：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
        <div id="UploadResult">{{Result}}</div>
        <div id="UploadCode">{{Code}}</div>
        <div id="UploadInfo">{{Info}}</div>
    </body>
    <script src="../static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script>
    $(function(){
        //這個頁面是載入在 iframe 裡面的，所以當頁面載入完，此處書寫語句進行反射
        //反射到父頁面，關閉上傳的 modal
        // $(window.parent.document).find('#GetResultBtn').click();     //兩種寫法都可以，下面的那種簡潔一點
        window.parent.$('#GetResultBtn').click();
    });
    </script>
</html>

註釋：

1. Iframe頁面也是需要載入Jquery的；

2. window.parent.$('#GetResultBtn').click(); 表示模擬點選事件。

二、js檔案：

index.js，相關程式碼片段：

$('#GetResultBtn').click(function(event) {
  var ThisFrame = $(window.frames["ResultFrame"].document);
  var UploadResult = ThisFrame.find('#UploadResult').html();
  var UploadCode = ThisFrame.find('#UploadCode').html();
  var UploadInfo = ThisFrame.find('#UploadInfo').html();
  console.log(UploadResult,UploadCode,UploadInfo)
  $('#UploadFileModal').modal('hide');            //關閉上傳檔案的Modal
});

註釋：

1. 傳值的方式可以主動可以被動，看各位客官的喜好和具體的需求，我這裡就純粹拋磚引玉。

三、Django後臺：

views：

def index(req):
    template = 'index.html'
    title = '測試檔案上傳'
    templatetags = {"title":title}
    if req.method == "POST":    #檢測到POST方法，就進行檔案上傳
        res = FileUpload(ReqFile=req.FILES['FileToUpload'],PostFix=['xls','xlsx'])    #FileUpload函式封裝了我的自定義上傳方法，這個大家自己YY
        templatetags.update({'Result':'上傳失敗！',      #傳參
                             'Code':res[0],
                             'Info':res[1]})
        if res[0] == 300:
            templatetags.update({'Result':'上傳成功！'})
        template = 'UploadFileResult.html'               #重新設定模板檔名
    return render_to_response(template,templatetags,context_instance=RequestContext(req))    #這裡實際分兩種情況：1.預設開啟index頁面；2.Post之後

註釋：

1. 這個view裡面的 render_to_response方法會出現兩種情況的response：

1）預設開啟/index/，就載入index.html模板，裡面包含Modal、js之類的東東；

2）如果使用了Post方法，那麼就會載入UploadFileResult.html模板。

2. context_instance這個東東是Django上傳檔案的時候需要使用的，不這麼做的話，沒有辦法提交POST請求，會提示“Forbidden (403) CSRF驗證失敗. 相應中斷”。

以上。

-------------------------------------------------------------------------------

參考文獻：

2. 還有一篇文章，提供了這個Iframe思路的，由於沒有記錄下來，後面如果再次看到就補上。

Django+Jquery+Bootstrap Modal+Iframe使用非同步機制上傳檔案實現方法

需求： 1. 現在有一個採用Jquery + Bootstrap做前端，Django+Apache做後端的站點； 2. 使用Bootstrap Modal彈出模態框提示使用者上傳檔案，點選上傳按鈕後

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

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

Jquery不使用form表單非同步上傳檔案的方法

現在的專案中需要使用到不重新整理頁面的方式實現上傳檔案，實現方法如下： html程式碼：檔案:<input id="file" type="file" name="file"/> <butt

PHP大檔案分片上傳的實現方法

一、前言在網站開發中，經常會有上傳檔案的需求，有的檔案size太大直接上傳，經常會導致上傳過程中耗時太久，大量佔用頻寬資源，因此有了分片上傳。分片上傳主要是前端將一個較大的檔案分成等分的幾片，標識當前分片是第幾片和總共幾片，待所有的分片均上傳成功的時候，在後臺進行合成檔案即可。二、

關於SpingMVC上傳檔案的方法

一般情況下，上傳檔案總是在表單中直接提交到後臺，後臺接收檔案物件後再處理。但是，這樣一般會頁面跳轉了！要達到非同步上傳，少不了用ajax了，很多ajax封裝了優秀的上傳控制元件，這裡重點介紹SpringMVC用ajaxfileupload.js控制元件上傳檔案的方法，有不足之處還望閱者見諒以及賦予見

Asp.net_使用FileUpload控制元件上傳檔案通用方法分享

FileUpload控制元件是.net自帶的控制元件，相信大家上傳檔案的時候在不借助第三方控制元件時還是非常方便的，現在博主就拿實際專案中總結的通用方法給大家分享一下，相信對初學者還是很有幫助的（ls_man）。 /// <summary>使用FileUplo

web 中常用的兩種上傳檔案的方法總結

這裡我們來總結整理一下常用的兩種檔案上傳方式以及要注意的東西： 1、springmvc .MultipartFile 的上傳方式。 2、org.apache.commons.fileupload 使用apache的fileuoload 來實現當我們使用springmvc

GitHub上傳檔案的方法！

自從使用GitHub管理程式碼以來，一直都是在github網站在線上傳檔案到倉庫中，但是有時因為網擁擠或者電腦的原因上傳失敗。最重要的原因是已經養成了在本地編輯好以後再上傳到GitHub上的習慣。看過了幾個教程，總結出最適合自己的比較簡單的方法。git是不能空資料夾的資料夾

IE input file隱藏不能上傳檔案解決方法

轉載至：http://www.qttc.net/201305334.html 又是IE的一個問題，近來是跟IE瀏覽器磕上了，這個問題發現不少人也遇到過，實在蛋疼。但今天這個不能算是一個bug，因為IE可能是從安全形度上考慮結果導致的。一步步來解讀。普通上

採用HTTP協議上傳檔案實現(java)

{ 37 38 publicfinalstatic String DEFAULT_ENCODING ="ISO8859_1"; 39 40 publicfinalstatic String CHINESE_ENCODING ="GBK"; 41 42 publicfi

C# 使用WebAPI上傳檔案實現

第一種通過 Form表單形式（適用於 JS、Android、IOS等平臺） /// <summary> /// 上傳檔案 /// </summar

python通過http(multipart/form-data)上傳檔案的方法

之前寫過一篇部落格，說的如何python如何通過http下載檔案，今天寫一篇部落格來介紹如下，python如何通過request庫實現上傳檔案這裡主要是解決multipart/form-data這種格式的檔案上傳，基本現在http協議上傳檔案基本上都是通過這種格式上傳一、思路一般情況下，如果我們往一個地

HTML5 jQuery+FormData 非同步上傳檔案，帶進度條

利用jQuery和html5的FormData非同步上傳檔案的好處是：實現很簡單很方便地支援進度條很方便地進行擴充套件和美化先看看效果圖：圖片上傳後的結果：實現步驟如下：第二步：上傳頁面的html程式碼： [html] view plain

jquery的非同步提交表單（非同步上傳檔案）及jquery.form.js上傳檔案注意事項

方法一：jquery的ajax方式，通過FormaData獲取表單資料（1）這種方式只需要jquery-1.7.js外掛；（2）通過`jquery中的FormaData類：自動搜尋表單資訊(表單內沒有name屬性的input不會被搜尋到)，IE<=9

springmvc結合jquery.form.js非同步提交表單上傳檔案

需要 jquery.form.js 外掛 <script type="text/javascript" src="/libs/js/form/jquery.form.js"><

Jquery非同步上傳檔案

我想通過jQuery非同步上傳檔案，這是我的HTML:123<span>File</span><input type="file" id="file" name="file" size="10"/><input id="uploadb

一鍵jquery非同步上傳檔案（圖片）的實現（檔案上傳進度讀取未做）

本文采用boostrap、、jquery、jade（html的一種模板）、nodejs實現最終實現的效果：一個按鈕在選擇完檔案後，自動上傳到後臺； -改變input樣式在form表單中，用<a>包裹<input type="file">，讓i

jQuery實現jQuery-form.js實現非同步上傳檔案

做為一個前端開發，你肯定遇到過這樣的需求：非同步上傳檔案，還要相容IE 8。[納尼，沒遇到過，那你們產品和ＵＩ對你也忒好了吧。遇到這種需求，如果專案不是很趕，可以自己用iframe來做，如果專案比較趕的話，就可以使用jquery-form.js外掛來實現，方便快捷。

通過jQuery Ajax使用FormData對象上傳文件

var href .get 只需要初始 log query eve 對數 FormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest發送這個"表單"。在 Mozilla Developer 網站使用FormData對象有

Django項目實戰之用戶上傳與訪問

post models static mit hang max none 文件上傳圖片 1 將文件保存到服務器本地 upload.html <!DOCTYPE html> <html lang="en"> <head>

Django+Jquery+Bootstrap Modal+Iframe使用非同步機制上傳檔案實現方法

相關推薦