jQuery的ajax下載blob文件
乍一聽有點蒙,之前用ng和react時也寫過類似的功能,但是很順利(所以忘記具體細節(jié)了)。jquery為啥會不行呢?看了一下具體場景,發(fā)現(xiàn)原來jq的ajax回調(diào)已經(jīng)把response的數(shù)據(jù)傻瓜式的以字符串的方式解析了。
查了一下gg,發(fā)現(xiàn)國內(nèi)的解決方案就是在該場景下不實用jq,而是自己手動創(chuàng)建XMLHttpRequest。雖然這個方法很可靠,但之前封裝的jq的ajax就不能使用了。
查了查jq的文檔,本打算自己根據(jù)jq提供的jQuery.ajaxSetup()接口來拓展數(shù)據(jù)類型,但怎么都搞不定。后來,在github上找到了一個大牛封裝好的jq插件。
然后我們就可以這么寫了:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blob demo</title> </head> <body> <img id="img" src="" /> <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js" charset="utf-8"></script> <script src="jquery-ajax-blob-arraybuffer.js"></script> <script type="text/javascript"> $.ajax({ url: "./face.jpg", type: "get", dataType: "blob", //擴展出了blob類型 }).done(function(data, status, jqXHR){ var reader = new window.FileReader(); reader.readAsDataURL(data); reader.onloadend = function() { document.getElementById("img").src=reader.result; } }).fail(function(jqXHR, textStatus) { console.warn(textStatus); }); </script> </body> </html>
不過,從該插件的源碼上來看,它也是手動構(gòu)建了一個XMLHttpRequest對象來發(fā)送ajax,不過兼容性可能會成為問題。想深究的可以看這里。
以上所述是小編給大家介紹的jQuery的ajax下載blob文件 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- ajax post下載flask文件流以及中文文件名問題
- javascript寫一個ajax自動攔截并下載數(shù)據(jù)代碼實例
- SpringMVC+Ajax實現(xiàn)文件批量上傳和下載功能實例代碼
- Ajax請求二進制流進行處理(ajax異步下載文件)的簡單方法
- 利用 FormData 對象和 Spring MVC 配合實現(xiàn)Ajax文件下載功能
- 基于Blod的ajax進度條下載實現(xiàn)示例代碼
- PHP中ajax無刷新上傳圖片與圖片下載功能
- 使用Ajax生成的Excel文件并下載的實例
- jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
- PHP+Ajax實現(xiàn)無刷新分頁實例詳解(附demo源碼下載)
- 前端ajax請求+后端java實現(xiàn)的下載zip壓縮包功能示例
相關(guān)文章
jQuery實現(xiàn)鼠標(biāo)可拖動調(diào)整表格列寬度
這篇文章主要介紹了通過jQuery實現(xiàn)鼠標(biāo)可拖動調(diào)整表格列寬度,需要的朋友可以參考下2014-05-05javascript中用星號表示預(yù)錄入內(nèi)容的實現(xiàn)代碼
在一個WEB項目中,有一個比較特殊點的文本框客戶要求實現(xiàn)在那個文本框錄入數(shù)據(jù)前先用星號(*)表示要錄入的信息(那個文本框要錄入的數(shù)據(jù)位數(shù)是已知的2011-01-01jQuery實現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可拖拽的許愿墻效果,可實現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09多種方法實現(xiàn)360瀏覽器下禁止自動填寫用戶名密碼
這篇文章主要介紹了多種方法實現(xiàn)360瀏覽器下禁止自動填寫用戶名密碼,需要的朋友可以參考下2014-06-06