jquery文件动态下载链接被屏蔽以及文件上传

jquery文件动态下载链接被屏蔽以及文件上传

原先的方法是和iframe一样用修改href的方式动态改下载链接

$('#ff').attr('href',"/static/files/"+id+".csv");

结果chrome下载把文件屏蔽了，这种修改href的方式不安全
所以换了种方法

var id = getCookie("id");
$("#download").click(function(){
     if(id && id !=''){
         // 不能直接修改a标签的href
         window.open("/static/files/"+id+".csv","_self");
     }else{
         alert("请先登录！！")
     }
});

这样就可以通过js修改链接，实现动态下载了
顺便存下js上传文件，不知道为啥单纯的post方法不行，只能妥协用ajax了

$("#btn").click(function(){
    alert('上传成功，请耐心等待文件处理')
    $("#result").text('文件处理中...');
    var formData = new FormData();
    var files = $('#file')[0].files;
    formData.append('file', files[0]);
    // 获取csrf,提交时加入data
    var csrfToken = $("[name='csrfmiddlewaretoken']").val();
    formData.append("csrfmiddlewaretoken",csrfToken);
    $.ajax({
         method: 'POST',
         url: '/app/upload/',
         data: formData,
         // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
         contentType: false,
         // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
         processData: false,
         success: function(data) {
            $("#result").text(data.text);
            $("#download").text('下载本次识别结果');
         }
    })
});

文件放在static文件夹中，无法鉴权，其他人也能通过链接下载

• 文件下载（优化后）
  前端

var csrfToken = $("[name='csrfmiddlewaretoken']").val();
$.post("/app/download/",{"csrfmiddlewaretoken":csrfToken},function(data,status){
    if(data.text){
        $("#result").html(data.text);
    } else {
        var id = getCookie('id');
        var datetime = new Date();
        var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
        var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
        blob = new Blob(['\ufeff' + data], {type: 'text/csv;charset=UTF-8'});
        //对于Blob对象，我们可以创建出一个URL来访问它。使用URL对象的createObjectURL方法。
        var a = document.createElement('a');
        a.hidden = true;
        a.download = id + '-识别结果-'+ hour + minute + second + '.csv';
        a.href=window.URL.createObjectURL(blob);
        a.click()
    }
});

后端

# 文件下载
fp = open('./files/%s.csv' % idn, 'rb')
response = FileResponse(fp)
response['content_type'] = 'text/csv,charset=UTF-8'
# response['Content-Disposition'] = 'attachment; filename=' + os.path.basename(file_path)
return response

采用post请求构建文件流访问，django后端使用FileResponse返回文件流，
通过blob和a标签实现下载

• csv在blob后乱码问题记录
  参考 https://my.oschina.net/dawd/blog/801323
  用wps打开csv文件，由于编码格式会导致csv乱码
  需要加\ufeff

blob = new Blob(['\ufeff' + data], {type: 'text/csv;charset=UTF-8'});  

需要csv编码格式为utf-8-bom才能保证文件传输和blob后正常解析，所以修改了模板的编码格式

• 优化了上传文件的格式，采js绑定事件的方法，方便css添加

<div class="up">
    {% csrf_token %}
    <input class="file" name="file" value="点击选择本地文件" readonly onclick="javascript:$('input[name=\'fileName\']').click();"/>
    <input type="file" id="fileName" name="fileName" style="display: none;" onchange="javascript:$('input[name=\'file\']').val(value.split('\\')[value.split('\\').length-1]);">
    <button id="upload" class="upload">上传</button>
</div>