js傳送和接收二進位制位元組流資料
阿新 • • 發佈：2018-12-11
- 傳送二進位制資料
var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
// Uploaded.
};
var blob = new Blob(['abc123'], {type: 'text/plain'});
oReq.send(blob);
或者
var myArray = new ArrayBuffer(512); var longInt8View = new Uint8Array(myArray); for (var i=0; i< longInt8View.length; i++) { longInt8View[i] = i % 255; } var xhr = new XMLHttpRequest; xhr.open("POST", url, false); xhr.send(myArray);
- 接收二進位制資料
var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if (arrayBuffer) { var byteArray = new Uint8Array(arrayBuffer); for (var i = 0; i < byteArray.byteLength; i++) { } } }; oReq.send(null);
如上設定只能是文字型別，如果是Blob型別：
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var blob = new Blob([oReq.response], {type: "image/png"});
// ...
};
oReq.send();
或者
var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "blob"; oReq.onload = function(oEvent) { var blob = oReq.response; // ... }; oReq.send();
舊版本的瀏覽器：
function load_binary_resource(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
return req.responseText;
}
ArrayBuffer和TypedArray，以及Blob的使用
var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97;//把二進位制的資料的首位改為97 ，97為小寫字母a的ascll碼；
var blob = new Blob([iA], {type: "application/octet-binary"});//把二進位制的碼轉化為blob型別
var url = URL.createObjectURL(blob);
window.open(url)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="f">
<script>
var eF = document.getElementById("f");
eF.onchange = function() {
var file = eF.files[0];
console.log(file instanceof Blob)
}
</script>
</body>
</html>
FileReader讀區blob檔案
var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener("load", function(ev) {
console.log(ev.target.result);//會輸出字元：a
});
fr.readAsText(blob)
blob轉化為typedArray 如果要把blob檔案轉化為二進位制的資料的話，要先把blob轉化為arraybuffer，然後再使用typedArray就可以直接編輯二進位制資料
var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener("load", function(ev) {
var abb = ev.target.result;
var iAA = new Int8Array(abb);
console.log(iAA);
});
//把blob檔案轉化為arraybuffer；
fr.readAsArrayBuffer(blob)