Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法_django+bootstrap+jquery做一个上报数据网站

作者：羊村懒王 | 2024-03-12 13:40:04

踩

django+bootstrap+jquery做一个上报数据网站

需求：

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思路的，由于没有记录下来，后面如果再次看到就补上。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/224309?site