HTML5图片预览研究

示例1：以下是一个符合官方标准格式的完整示例。

<!DOCTYPE html>
<html>
<head>
<style>
#show img{width:300px;max-width:100%;}
</style>
</head>
<script>
function show(file){
var img=document.createElement("img");
img.onload=function(e){window.URL.revokeObjectURL(this.src);}
img.src=window.URL.createObjectURL(file);
document.getElementById("show").appendChild(img);
}
function fuck(files){
if(!files.length){alert("nofile");}
document.getElementById("show").innerHTML="";
for(var i=0,z=files.length;i<z;i++){
show(files[i]);
}
}
</script>
<body>
<input type="file" multiple="multiple" onchange="fuck(this.files)" />
<div id="show"></div>
</body>
</html>

示例2：如果觉得show函数部分不方便添加样式的化，貌似也可以改成这样。

function show(file){
var src=window.URL.createObjectURL(file);
var insert='<div class="imglist"><img src="'+src+'" /></div><br />';
insert.onload=function(e){window.URL.revokeObjectURL(src);}
document.getElementById("show").innerHTML=document.getElementById("show").innerHTML+insert;
}

示例3：利用Filereader进行的预览图读取，效率最低。

function show(file){
var reader=new FileReader();
reader.onload=function(){
var img=document.createElement("img");
img.src=this.result;
document.getElementById("show").appendChild(img);
}
reader.readAsDataURL(file);
}

下面来就这些代码讲讲。研究这些的起因是我想自己编写一个HTML5图片批量上传程序，初始阶段想添加一个预览图便涉及到这些内容。众所周知在HTML5之前各浏览器因为安全原因拦截了JS直接获取文件路径，以致无法直接用JS获取图像预览，只能用swfupload这类过时的方式。

在HTML5之后引入了一个叫FileReader的API，可以读取文件的内容（示例3），但很可惜的是也只能读取到内存里而无法获取路径。此函数中readAsDataURL是类似微信公众号将图片读取成base64编码，直接作为URL回调给自身以显示在img标签中。但有些图片巨大会导致浏览器效率极低，所以并不推荐这种方式。

示例1、2则是使用createObjectURL这个函数，直接将文件复制到浏览器内存，并赋予其一个临时URL进行访问。此方法效率相对FileReader要高很多，但依然涉及到内存占用问题。revokeObjectURL这个函数则是在图像加载完成后，将临时内存占用销毁，注释此行可在关闭页面前一直利用临时URL访问图片。

但不知为啥在我本机Chrome46测试，即便执行了销毁操作，内存占用依然没有下降。在关闭页面前如果反复选择图片，则会累积占用内存直至溢出。可以看出HTML5图片预览还是有很多问题存在的，对于我这种性能较差的电脑会直接带崩，所以制作上传程序的时候还是慎重考虑下是否添加预览功能比较好……

历史上的今天

2022年：CSS 将导航栏固定在窗口的顶部(fixed)（0条评论）

2022年：腾讯云CDN刷新和预热功能的配置方法（0条评论）

2014年：80%的人都是这样，遗憾终生！（0条评论）

2014年：女人最美好的年龄应该干嘛？（0条评论）

2014年：不拔插U盘重新启用U盘的方法（0条评论）

本文最后更新于 2020-01-08 20:19

请博主喝杯咖啡呢，谢谢^_^

如果本文“对您或有帮助”，欢迎随意打赏，以资鼓励继续创作！

原创文章《HTML5图片预览研究》，作者：笔者徐哲，未经允许不得转载。
转载或复制时，请注明出处：https://www.xuxiaokun.com/182.html，本文由 Mr.xu 博客网整理。
本站资源下载仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。