ajax post下载flask文件流以及中文文件名问题_AJAX相关

来源:脚本之家  责任编辑:小易  

你的ajax请求,给url添加一个随机参数就ok,比如url=url+"&"+new Date();www.zgxue.com防采集请勿采集本网。

ajax post下载文件

post传值和url传值,他们的获取方式不一样,你弄的是post获取方式,即使你在浏览器里写上参数名和值也没用,因为他根本活不到这个url传的参数,更别说改了, 你看一下post和get的传值方式和区别

后端返回文件流,flask中可使用 return send_file(文件路径) 返回二进制文件流,在headers中传送文件相关信息(如文件名)。

$.post('url',{aaa:'bbb'},function(data){/func(data);});

前端使用 URL.createObjectURL() 创建创建一个  DOMString URL对象,创建一个 a 节点,将URL对象赋给a节点的 href 属性,最后调用 click() 方法点击该 a 节点即可弹出浏览器下载框。

Get 用 Request.QueryString POST 时,针对URL里面的参数还是和Get中一样,Form中的可以用 Request.Form 对于 Params,不推荐使用。

展示图片

提交的url地址错误,这个地址应该是服务跟目录啊。比如你用的是tomcat,在toncat下应该有多个应用,你本次运行了一个test应用,应用中做了一个ajaxPost.action来测试ajax提交参数,那么,url路径

方法同上,将 a 改成 img , href 改成 src 即可,将URL对象写入到目标img标签的src即可。

get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性

另一种方法是后端返回图片转base64的字符串,src的值形如 "data:image/svg+xml;base64,${base字符串}" 。(这里的 svg+xml 表示图片格式是svg,如果是png则改成png)

中文文件名乱码

http headers中直接传输中文文件名,比较简单的方法是后端进行url转码(这里使用python的 urllib.parse.quote ),前端使用 decodeURI() 解码。

此外还可以设置headers的 Content-Disposition: attachment; filename*=UTF-8''xxxxx ,不过兼容性嘛……麻烦还不如直接urlcode算了,而且也懒得设置 Content-Disposition 了,前端从 Content-Disposition 中取 filename 也是够麻烦的,会取到一长串字符串然后自己再想办法取出来 filename= 后面的信息。

代码如下:

flask

from urllib.parse import quote@file.route('/download', methods=["POST"])def download_file(): filename='xx' #文件名 filepath='xx/xx' #文件路径 res = make_response(send_file(filepath)) #自定义的一个header,方便前端取到名字 res.headers['filename'] = quote(filename.encode('utf-8')) return resjavascript——以async异步fetch为例:async function download() { const res = await fetch(`http://xxx/file/download`, { method: "POST", body: JSON.stringify({}), //body里面是要发送的数据 headers: { "Content-Type": "application/json" }, responseType: 'blob' }) if (res.ok) { const blData = await res.blob() //拿到blob数据 const urlObjData = window.URL.createObjectURL(new Blob([blData])) //创建url对象 //获取文件 进行下转码 const fileName = decodeURI(fileNameres.headers.get('filename')) //创建a标签 点击a标签 达到下载目的 const link = document.createElement('a') link.href = urlObjData link.download = fileName //下载文件的名字 document.body.appendChild(link) link.click() document.body.removeChild(link) window.URL.revokeObjectURL(urlObjData); //展示图片 //xxx.src=urlObjData }}

ps:flask下载文件---文件流

html:

<a name="downloadbtn" class="btn btn-success pull-right" href="http://www.zgxue.com/downloadfile/?filename=/root/allfile/123.txt">下载</a>

py:

@app.route('/downloadfile/', methods=['GET', 'POST'])def downloadfile(): if request.method == 'GET': fullfilename = request.args.get('filename')    # fullfilename = '/root/allfile/123.txt' fullfilenamelist = fullfilename.split('/') filename = fullfilenamelist[-1] filepath = fullfilename.replace('/%s'%filename, '') #普通下载 # response = make_response(send_from_directory(filepath, filename, as_attachment=True)) # response.headers["Content-Disposition"] = "attachment; filename={}".format(filepath.encode().decode('latin-1')) #return send_from_directory(filepath, filename, as_attachment=True) #流式读取 def send_file(): store_path = fullfilename with open(store_path, 'rb') as targetfile: while 1: data = targetfile.read(20 * 1024 * 1024) # 每次读取20M if not data: break yield data response = Response(send_file(), content_type='application/octet-stream') response.headers["Content-disposition"] = 'attachment; filename=%s' % filename # 如果不加上这行代码,导致下图的问题 return response

没有文件名,和文件格式,遇到这种情况,打开F12,查看response.headers 与正常的比较

总结

到此这篇关于ajax post下载flask文件流以及中文文件名的文章就介绍到这了,更多相关ajax post下载flask文件流内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

Form里面有你很多的input其实只要在你zdForm里面隐藏一个iframeframeborder="0">然后 提交表版单 把target指向这个Iframe就行了("#formId").attr("action内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 通过ajax进行post提交json数据的方法
  • 使用ajax的post同步执行(实现方法)
  • ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
  • servlet获取ajax post请求中参数以form data和request payload形式传输的方法
  • 关于jquery.ajax()的jsonp碰上post详解
  • node.js如何响应ajax的post请求并且保存为json文件详解
  • ajax使用formdata上传文件流
  • 自己动手封装的 ajax
  • 菜鸟蔡之ajax复习第三篇(ajax之无刷新登录)
  • ajax异步读取后台传递回的下拉选项的值方法
  • js与jquery实现的兼容多浏览器ajax请求实例
  • ie发送ajax请求返回上一次结果的解决方法
  • 用实现ajax读博客rss示例代码
  • 非常实用的ajax用户注册模块
  • ajax 程序开发中常见问题
  • ajax请求后台接口数据与返回值处理js的实例讲解
  • 利用ajax实现鼠标悬浮获取值的代码
  • ajax post下载文件/流
  • ajax post 缓存
  • Ajax的POST方法 100分
  • query AJAX POST提交实例
  • ajax post 值能否会被用户在post接收端页面篡改
  • jquery ajax POST方法不能定义data
  • .net中服务端怎样获取到客户端用Ajax技术Post来的数据?
  • ajax发送post请求,在express服务端一直404
  • ajax get方式传值和post方式传值哪个安全性更高
  • AJAX怎么通过POST把一个数据发给PHP?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关通过ajax进行post提交json数据的方法使用ajax的post同步执行(实现方法)ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)servlet获取ajax post请求中参数以form data和request payload形式传输的方法关于jquery.ajax()的jsonp碰上post详解node.js如何响应ajax的post请求并且保存为json文件详解ajax使用formdata上传文件流自己动手封装的 ajax菜鸟蔡之ajax复习第三篇(ajax之无刷新登录)ajax异步读取后台传递回的下拉选项的值方法js与jquery实现的兼容多浏览器ajax请求实例ie发送ajax请求返回上一次结果的解决方法用实现ajax读博客rss示例代码非常实用的ajax用户注册模块ajax 程序开发中常见问题ajax请求后台接口数据与返回值处理js的实例讲解利用ajax实现鼠标悬浮获取值的代码jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现jquery ajax中使用serialize()方ajax获取数据中文乱码问题最简单自己动手打造ajax图片上传(网上没ajax获取数据然后显示在页面的实ajax 缓存问题的两种解决方法(ieajax实现改变状态和删除无刷新的实例ajax实现用户名校验的传统和jquery的$.po使用html5中postmessage知识点解决ajax中ajax上传图片到php并压缩图片显示的方法使用ajax实现分页技术ajax(xmlhttprequest.status)状态码ajax开始准备篇ajax+smarty技术实现无刷新分页php+ajax无刷新实现返回天气预报数据ajax动态赋值echarts的实例(饼图和柱形图
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved