說明：做要用到file標簽和 html5 Blob對象

方法1：使用file標簽

請選擇一個文件：

// 將文件以Data URL形式進行讀入頁面

function readAsDataURL(){

// 檢查是否為圖像類型

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

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

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

return false;

}

var reader = new FileReader();

// 將文件以Data URL形式進行讀入頁面

reader.readAsDataURL(simpleFile);

reader.onload = function(e){

console.log(this.result);

result.innerHTML = '';

}

}

方法2 ：使用Blob對象，把一張圖片arrayBuffer緩存保存到Blob對象，然后給對象一個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;

}

附加內容：針對ArrayBuffer內容進行操作顯示

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);//把arrayBuffer轉換為byte處理

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

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

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;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。