您的位置：首页 > Web前端 > BootStrap

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

2015-12-16 10:34 1031 查看
需求：

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思路的，由于没有记录下来，后面如果再次看到就补上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航