jQuery的ajax下載blob文件
乍一聽(tīng)有點(diǎn)蒙,之前用ng和react時(shí)也寫(xiě)過(guò)類似的功能,但是很順利(所以忘記具體細(xì)節(jié)了)。jquery為啥會(huì)不行呢?看了一下具體場(chǎng)景,發(fā)現(xiàn)原來(lái)jq的ajax回調(diào)已經(jīng)把response的數(shù)據(jù)傻瓜式的以字符串的方式解析了。
查了一下gg,發(fā)現(xiàn)國(guó)內(nèi)的解決方案就是在該場(chǎng)景下不實(shí)用jq,而是自己手動(dòng)創(chuàng)建XMLHttpRequest。雖然這個(gè)方法很可靠,但之前封裝的jq的ajax就不能使用了。
查了查jq的文檔,本打算自己根據(jù)jq提供的jQuery.ajaxSetup()接口來(lái)拓展數(shù)據(jù)類型,但怎么都搞不定。后來(lái),在github上找到了一個(gè)大牛封裝好的jq插件。
然后我們就可以這么寫(xiě)了:
<!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", //擴(kuò)展出了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>
不過(guò),從該插件的源碼上來(lái)看,它也是手動(dòng)構(gòu)建了一個(gè)XMLHttpRequest對(duì)象來(lái)發(fā)送ajax,不過(guò)兼容性可能會(huì)成為問(wèn)題。想深究的可以看這里。
以上所述是小編給大家介紹的jQuery的ajax下載blob文件 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- ajax post下載flask文件流以及中文文件名問(wèn)題
- javascript寫(xiě)一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
- SpringMVC+Ajax實(shí)現(xiàn)文件批量上傳和下載功能實(shí)例代碼
- Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法
- 利用 FormData 對(duì)象和 Spring MVC 配合實(shí)現(xiàn)Ajax文件下載功能
- 基于Blod的ajax進(jìn)度條下載實(shí)現(xiàn)示例代碼
- PHP中ajax無(wú)刷新上傳圖片與圖片下載功能
- 使用Ajax生成的Excel文件并下載的實(shí)例
- jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
- PHP+Ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)實(shí)例詳解(附demo源碼下載)
- 前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例
相關(guān)文章
jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度
這篇文章主要介紹了通過(guò)jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度,需要的朋友可以參考下2014-05-05javascript中用星號(hào)表示預(yù)錄入內(nèi)容的實(shí)現(xiàn)代碼
在一個(gè)WEB項(xiàng)目中,有一個(gè)比較特殊點(diǎn)的文本框客戶要求實(shí)現(xiàn)在那個(gè)文本框錄入數(shù)據(jù)前先用星號(hào)(*)表示要錄入的信息(那個(gè)文本框要錄入的數(shù)據(jù)位數(shù)是已知的2011-01-01jQuery實(shí)現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)可拖拽的許愿墻效果,可實(shí)現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡(jiǎn)單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09jquery ajax請(qǐng)求實(shí)例深入解析
jquery中封裝了一些ajax請(qǐng)求的方法,很實(shí)用,本文將以此引入一個(gè)實(shí)例,對(duì)jquery中ajax請(qǐng)求的方法進(jìn)行詳細(xì)介紹,需要了解更多的朋友可以參考下2012-11-11Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫(xiě)用戶名密碼
這篇文章主要介紹了多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫(xiě)用戶名密碼,需要的朋友可以參考下2014-06-06