本地图片预览+blob使用

说明：做要用到file标签和 html5 Blob对象

方法1：使用file标签

<label>请选择一个文件：</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick = "readAsDataURL()"/>

// 将文件以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 = '<img src="'+this.result+'" alt=""/>';
}
}
    
        方法2 ：使用Blob对象，把一张图片arrayBuffer缓存保存到Blob对象，然后给对象一个url.  图片arrayBuffer可通过websocket获取。

   

<img id="img" />
<input type="file" id = "file">
<input id="but" value="aa" type="button" onclick="mes()">
<script type="text/javascript">
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.onload=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.onload=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;
}
</script>

 

附加内容：针对ArrayBuffer内容进行操作显示

<script type="text/javascript">
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.onload=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.onload=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;
}
</script>