說明：做要用到file標(biāo)簽和 html5 Blob對(duì)象

方法1：使用file標(biāo)簽

請(qǐng)選擇一個(gè)文件：

// 將文件以Data URL形式進(jìn)行讀入頁(yè)面

function readAsDataURL(){

// 檢查是否為圖像類型

var simpleFile = document.getElementById("file").files[0];

if(!/image\/\w+/.test(simpleFile.type)) {

alert("請(qǐng)確保文件類型為圖像類型");

return false;

}

var reader = new FileReader();

// 將文件以Data URL形式進(jìn)行讀入頁(yè)面

reader.readAsDataURL(simpleFile);

reader.onload = function(e){

console.log(this.result);

result.innerHTML = '';

}

}

方法2 ：使用Blob對(duì)象，把一張圖片arrayBuffer緩存保存到Blob對(duì)象，然后給對(duì)象一個(gè)url.? 圖片arrayBuffer可通過websocket獲取。

function mes(){

var imgs = document.getElementById("file");

var img = document.getElementById("img");

var reader = new FileReader();

reader.readAsArrayBuffer(imgs.files[0]);

reader.οnlοad=function(e){

//console.log(JSON.stringify(this.result) );

var bf = this.result;

var blob = new Blob([bf],{type:"text/plain"});

console.log(blob);

var str = URL.createObjectURL(blob);

img.src = str;

};

// var reader3 = new FileReader();

// reader3.readAsBinaryString(imgs.files[0]);

//reader3.οnlοad=function(e){

//console.log(JSON.stringify(this.result) );

//console.log(this.result );

//};

//console.log(JSON.stringify(imgs.files[0])+" "+imgs.files[0]);

//var str = URL.createObjectURL(imgs.files[0]);

//console.log("imgs:"+JSON.stringify(str));

// img.src = str;

}

附加內(nèi)容：針對(duì)ArrayBuffer內(nèi)容進(jìn)行操作顯示

function mes(){

var imgs = document.getElementById("file");

var img = document.getElementById("img");

var reader = new FileReader();

reader.readAsArrayBuffer(imgs.files[0]);

reader.οnlοad=function(e){

//console.log(JSON.stringify(this.result) );

var bf = this.result;

var bytes = new Uint8Array(bf);//把a(bǔ)rrayBuffer轉(zhuǎn)換為byte處理

console.log("bytes:"+JSON.stringify(bytes));

for(var i = 6400 ; i < 7600; i ++){//隨意修改數(shù)據(jù)

bytes[i]=0xff;

}

console.log("========================");

console.log("========================");

console.log("========================");

console.log("========================");

//console.log("bytes:"+JSON.stringify(bytes));

var blob = new Blob([bytes],{type:"text/plain"});

console.log(blob);

var str = URL.createObjectURL(blob);

img.src = str;

};

// var reader3 = new FileReader();

// reader3.readAsBinaryString(imgs.files[0]);

//reader3.οnlοad=function(e){

//console.log(JSON.stringify(this.result) );

//console.log(this.result );

//};

//console.log(JSON.stringify(imgs.files[0])+" "+imgs.files[0]);

//var str = URL.createObjectURL(imgs.files[0]);

//console.log("imgs:"+JSON.stringify(str));

// img.src = str;

}

總結(jié)

以上是生活随笔為你收集整理的blob html 预览_本地图片预览+blob使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。