ajax post下載flask文件流以及中文文件名問題_AJAX相關

來源:腳本之家  責任編輯:小易  

你的ajax請求,給url添加一個隨機參數就ok,比如url=url+"&"+new Date();www.anxorj.tw防采集請勿采集本網。

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 [email protected]('/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.anxorj.tw/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.anxorj.tw請勿采集。


  • 本文相關:
  • 通過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.anxorj.tw All Rights Reserved
    陕西快乐10分下载