HTML5图片预览研究

Regular_Document-Code-HTML.png

示例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小时内删除,不允许用于商业用途,否则法律问题自行承担。

(0)
打赏 微信扫一扫赞赏 微信扫一扫赞赏 支付宝扫一扫赞赏 支付宝扫一扫赞赏
上一篇 2015年11月5日
下一篇 2015年12月15日

相关推荐

发表回复

登录后才能评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

笔者期待与您共勉 · 互赢

有言必答、商务合作、有偿服务

QQ:点击这里给我发消息

邮件:it@xuxiaokun.com

线上沟通时间 ↓↓↓:

周一至周五 9:30 - 17:30

其余时间Mail或QQ我,有言必应。

244439232