Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法

来源：互联网发布：数字电子网络配线架编辑：程序博客网时间：2024/06/06 03:29

需求：

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验证失败. 相应中断”。

以上。

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

参考文献：

1. 解析Jquery取得iframe中元素的几种方法

2. 还有一篇文章，提供了这个Iframe思路的，由于没有记录下来，后面如果再次看到就补上。

0 0