ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐
寫在前面 :從提出需求到完美的解決問題,實現過程是曲折的。
需求:在前(web client)後(Restful Service)端完全解耦的模式框架下,webclient需要請求 Service 返回的圖片檔案(二進位制流),並在client端顯示。
第一步思考:拿到此需求, 基於程式設計師的狂妄心裡,思考到顯示圖片而已,jquery ajax直接get請求 將返回data 賦值給img標籤的src屬性即可嘛,so easy~
不知天高地後的小子開始碼程式碼,經過幾分鐘給出了以下的程式碼,並自信滿滿的準備測試。
//$.ajax({ // method: "GET",// url: serverUrlBase + "/server/images/" + mapid + "/files/png",//跨域,請求會返回流檔案 png圖片 // beforeSend: function (xhr) { // xhr.setRequestHeader("client_type", "DESKTOP_WEB"); // xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);// }, // success: function (data) { // //$("#remoteimg").attr("url", data); // } //});
在visual studio 中選中檔案 在瀏覽器中檢視。
這是個什麼~!!!!!!!!!!!!!!! 不符合期望啊~~~ !!!!!!!!!
第二步思考:後端那小子給的API肯定有問題。先用工具測試看看。
開啟chorme ,開啟裝好的postman元件,輸入請求地址,點選SEND。等待兩秒鐘一副超大的圖片檔案顯示出來了~~
第三步思考:
經過幾分鐘卡頓,我勒個去,瀏覽器怎麼卡死了。耐心等了一會 資料打印出來了:
這是什麼乖乖,我滴孩嘞(正統 淮南話)。
第四步思考:怎麼是這樣的資料。Postman 中返回的是圖片啊 我的怎麼這樣,對了 看看postman 返回的是什麼資料。
在postman中選中圖片 -》右鍵-》檢查 如下圖所示:
第五步思考:為什麼我的資料與postman資料不同。為何是亂碼咧? 不對,ajax返回的資料是什麼?難道編碼被改了?難道不支援二進位制流?
一邊想著 一邊開啟jquery 官網(抱怨一下 jquery官網真心慢,w3school真心膚淺) 查詢ajax datatype資料型別
發現竟然沒有二進位制資料選項,那是不是返回的資料被預設以文字形式返回了。
抱怨:jquery做了這麼久了 一個ajax方法還停留在幾年前的xmlhttprequest 1的版本中,驚人的不支援流檔案!!!
我這還怎麼大肆推行我的前後臺完全隔離思想~~。算了不抱怨了,果然是不能靠別人,只能自己寫了。
樓主依稀記得 xmlhttprequest 2 標準中支援流檔案的,並且應該使用 xhr.response作為返回 而不是responseText。 那麼開始寫到:
var url = serverUrlBase + "/server/images/" + mapid + "/files/png";' var xhr = new XMLHttpRequest(); xhr.open('GET', url, true);//get請求,請求地址,是否非同步 xhr.setRequestHeader("client_type", "DESKTOP_WEB"); xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key); xhr.onload = function() { if (this.status == 200) { var data = this.response; //TODO...............................................如何接收資料呢。 } } xhr.send();
第六步思考:這樣應該可行,但是怎麼處理請求的資料呢? ???? 這個問題。 對了 html5新特性裡面是不是 提到一個 Blob物件來著。試試看。
通過查閱相關blob資料,查閱 4.6.9 The response
attribute 得知 返回型別應該使用
在請求成功的地方 新增以下程式碼:
var blob=new Blob();
blob=this.response;
既然二進位制資料拿到了,那麼要把它放在一個 html標籤中,並且應該是img標籤 那麼:程式碼應該是
var img = document.createElement("img");
img.src = window.URL.createObjectURL(blob); //有問題,將blob載入到img中 由於blob太大 會有效能影響 應該怎麼在載入之後 如何釋放呢:
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);//釋放。
};
然後 將img 放到一個div容器中就可以啦。
$("#imgcontainer").html(img); 是的請求處理就應該是這樣。
那麼我們最終的程式碼如下:
var url = serverUrlBase + "/server/images/" + mapid + "/files/png"; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = "blob"; xhr.setRequestHeader("client_type", "DESKTOP_WEB"); xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key); xhr.onload = function() { if (this.status == 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); $("#imgcontainer").html(img); } } xhr.send();
結語:這樣樓主解決了 載入二進位制流的問題。 結合 上一篇提到的ajax跨域請求,對於前後端完全分離理念的實現又更近了一步。當然面對安全還是有許多要考慮的問題。
在此過程中,也讓摟著領悟到一點:高階的封裝(ajax)固然好,然而對一些特殊的請求無法處理(請求流檔案),因此還需掌握底層的原理,才能面對苛刻的需求。
總結程式碼:
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
$("#imgcontainer").html(img);
} } xhr.send();
相關推薦
前端接收資料流實現圖片預覽效果--ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐
本文為轉載文章 原文連結:https://www.cnblogs.com/cdemo/p/5225848.html 首先要謝謝這位大神的無私貢獻!解決了我的問題也完美表達了我當時的心路歷程 ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐
ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐
寫在前面 :從提出需求到完美的解決問題,實現過程是曲折的。 需求:在前(web client)後(Restful Service)端完全解耦的模式框架下,webclient需要請求 Service 返回的圖片檔案(二進位制流),並在client端顯示。 第一步思考:拿到此需求, 基於程式設計師的狂妄心
ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐
寫在前面 :從提出需求到完美的解決問題,實現過程是曲折的。需求:在前(web client)後(Restful Service)端完全解耦的模式框架下,webclient需要請求 Service 返回的圖片檔案(二進位制流),並在client端顯示。第一步思考:拿到此需求,
web前端 ajax請求上傳圖片數據類型處理
div stat log sta 直接 文件類型 part ucc -a form: function (url, paras, files, success) {//上傳的文件類型是MultipartFile[]//如果把需要的參數直接傳入,則會請求錯誤//設置請求參數
【Java筆記】IO流中檔案複製及異常處理
import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; public class Main
Java傳送POST請求,引數為JSON格式,並接收返回JSON資料
/** * 傳送post請求 * @param url 路徑 * @param jsonObject 引數(json型別) * @param encoding 編碼格式 * @return * @throws P
《流程的永恆之道:工作流及BPM技術的理論、規範、模式及最佳實踐》書籍導讀
編輯推薦 業內深入融合流程管理與流程技術的專著,全面講解了業務流程及其實現,企業打造高效流程型組織的實踐指南。 本書作者是國內資深的工作流及BPM領域專家,現任國內知名的IT上市公司東華軟體股份公司房產事業部執行副總經理。近些年,集首席諮詢顧問、系統分析師、架構師、技
將A檔案中與B檔案同名但不同字尾名的檔案提取出來並扔到C資料夾中 matlab
fileList = dir('C:\Users\DELL\Desktop\data\helen\train\train_res\*.jpg'); sourcePath = 'C:\Users\DELL\Desktop\helen\helen\trainset\'; targetPath = '
如何處理BLOB型別資料之三:使用Servlet在頁面上顯示BLOB中的圖片
實驗環境:JDeveloper 11.1.2.0.0。接上一個實驗《如何處理BLOB型別資料之二:下載BLOB內容並儲存到檔案中》。我的設計思想:這其實是一個動態顯示圖片的問題,類似於很多網站上登入時要求輸入的圖片認證碼。一開始,根據前面的思路,我打算繼續使用ADF BC的
Python3.4---實戰專案-自動下載圖片驗證碼,並儲存到專門資料夾,使用圖片驗證碼庫識別,然後打印出來
Python3.4—實戰專案-自動下載圖片驗證碼,並儲存到專門資料夾,使用圖片驗證碼庫識別,然後打印出來 1、環境部署 參考文章《使用Python識別圖片驗證碼》內容,製造好圖片驗證碼識別庫msweb1.dat 1.1、對圖片驗證碼隨時下載的URL地址
opengl讀取24位BMP檔案為紋理並處理黑色背景為透明
原理: 直接用BITMAP資料而未用到AUX庫和windows LoadImage API 24位BItMap檔案格式不細說,見度娘 格式要求:24位無壓縮點陣圖,必須是2^n*2^n大小 程式碼(C/C++)純手寫,勿噴。。。 int LoadGLTextures(ch
ajax請求二進位制流圖片並渲染到html中img標籤
說明 後臺返回圖片二進位制流,需要使用get請求獲取返回結果,並且將返回的二進位制流以圖片形式顯示在頁面img中。 但是日常顯示圖片都諸如這種形式: <img src="圖片路徑、地址" alt="" /> 以上需求不能將後端地址直接
ajax實戰:(ajax非同步下載檔案)請求二進位制流進行處理
需求 管理後臺需要隨時下載資料報表,資料要實時生成後轉換為excel下載 檔案不大,頁面放置“匯出”按鈕,點選按鈕後彈出儲存檔案對話方塊儲存 說明:第一種方法使用a標籤直接可以滿足大部分人需求,第二種方法純粹是在說實現方法以及更好的操作體驗,不需要(舉一個需
JAVA中建立HTTP通訊,從伺服器上獲取HTML程式碼,通過HTTP請求來下載圖片或其他二進位制檔案的程式,下載結果要按下載到的檔案型別進行存檔中。
通過HTTP請求來下載圖片或其他二進位制檔案的程式,下載結果要按下載到的檔案型別進行存檔 將程式碼從伺服器的中獲取下來的程式碼,在我之前已經講過了這裡寫連結內容 這裡我們就直接將原始碼稍加改動,加入一個檔案並請將builder 寫入即可。 import
使用XMLHttpRequest處理異步請求返回的圖片等二進制文件
folder float blob als ner func 圖片 rand wid 封裝的Ajax沒有接受文件的類型 所以要用傳統的 XMLHttpRequest來處理 function ShowPdf() { var url = "/Channel
ajax獲取伺服器靜態資源(一個.json檔案),請求成功,有檔案返回,但是ajax回撥卻進了error(一個回車鍵惹出的禍)
問題描述:同事反應問題:向後臺請求json檔案,完了在前臺渲染一個表格,但是始終渲染不出來。 $.ajax({ &nbs
base64格式圖片轉換成二進位制流並生成圖片檔案
/** * 將base64格式的字串轉換成二進位制流,並轉換成圖片 */ public boolean changeBase64ToImage(String base64String){ //base64格式字串為空,返回fal
Ajax(form表單檔案上傳、請求頭之contentType、Ajax傳遞json資料)
form表單檔案上傳 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 這裡必須要請求頭格式才能把上傳檔案的物件傳過去 enctype="multipart/form-
流讀取檔案發生系統資源不足無法完成請求的服務
手機掃描條碼求助treeView1.Nodes.Find怎麼用呀!!手機掃描條碼求助treeView1.Nodes.Find怎麼用呀!! 圖論生成樹VSTOOutlook發郵件時To中和CC中按照名字首字母排序圖論生成樹VSTOOutlook發郵件時To中和CC中按照名字首字
轉載ajax 請求不能下載檔案
$('#fileexcel').unbind('click').bind('click',function(){ alert("我要下載了"); $.ajax({ type:'post',