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

需求：

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里面的代码片段：

  

    {% csrf_token %}
    

      请选择文件
      
    
  
  

获取结果

注释：

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

2. 默认iframe完全为空，可以定义大小为0，也可以加上隐藏的样式，等下Django反馈的时候就会加载内容了；

3. 这个“获取结果”的button，随意加在哪里都成，也是隐藏的；

题外话：

采用Django上传文件，需要满足的条件或者说需要怎么做(csrf之类的话题)，可以看我另外一篇文章：

-------------文章还没有写（^_^）

UploadFileResult.html：

    
    
    
    
        
{{Result}}
        
{{Code}}
        
{{Info}}
    
    
    

注释：

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