用html5实现图片预览功能

我们在上传图片的时候往往需要预览,目前大部分的网站,总结起来用三种方式来实现:

第一种最为常见,需要和后端配合。点击上传图片的input,触发input的onchange事件,在onchange事件中向后端提供的接口发送图片信息,之后返回的数据中包括图片的url,再将url赋值给img的src属性从而实现图片预览。

当然,前端的朋友会产生疑惑,图片是以什么形式传递到后端呢?针对这个我会单独写一篇文章来阐述,现在暂不详述。简单来说,表单形式传递图片会修改entype属性,这里一般会用formdata实现。

第二种是利用html的新特性FileReader。先来看以下这个demo,建议大家可以将代码拷贝下来自己测试。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>

</head>
<body>
<!-- 上传图片的input 绑定onchange事件-->
<input type="file" onchange="previewFile()"><br>
<!-- 预览的图片 -->
<img src="" height="200" width="300" alt="Image preview..."/>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 // 选中file元素,并访问其files属性的第一个值
 var file  = document.querySelector('input[type=file]').files[0];
 console.log(document.querySelector('input[type=file]').files);
 console.log(document.querySelector('input[type=file]').files[0]);
 
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</body>
</html>

代码中分别执行了如下两句:

console.log(document.querySelector('input[type=file]').files);

console.log(document.querySelector('input[type=file]').files[0]);

得到的结果分别为:


可以看出file包含着图片的信息:代码再往下面是 new 了一个FileReader ,并且监听的是这个对象的 onloadend事件,事件内容就是修改img的src属性。

FileReader实例化的对象上有个方法:reader.readAsDataURL(参数)

这个方法是个回调函数,参数为上面获取的包含图片信息的file对象,readAsDataURL读取图片信息对象完成后,会触发reader上的onloadend事件,该事件的回调函数中的数据就是datebase64化后的图片信息,将其插入到图片的img的src图片展现。

上面这种方式有些浏览器不是很兼容,不考虑低版本浏览器的情况下完全可以使用。

第三种方法是关于blob的。实现代码如下,相比上面更加简单。

blob参考(http://www.cnblogs.com/hhhyaaon/p/5928152.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>

</head>
<body>
<!-- 上传图片的input 绑定onchange事件-->
<input type="file" id="imgFile" onchange="previewFile()"><br>
<!-- 预览的图片 -->
<img id="img" src="" height="200" width="300" alt="Image preview..."/>
<script language=javascript>
function previewFile() {
    var ele =  document.getElementById('imgFile').files[0];
    var createObjectURL = function(blob){
      return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    };
    var newimgdata = createObjectURL(ele);
    document.getElementById('img').src = newimgdata;    
}

</script>
</body>
</html>

原理如下:第一步还是获取图片信息 file;第二步将其传入一个方法: window.URL.createObjectURL( )

这个方法返回一个url,url的样式为:

而通过第二种方法实现的url,如图:

结果一目了然,后两种方式相对于第一种来说,预览图片不用向后端提前发送,减轻服务器压力,但都有一定的兼容性问题,可根据具体项目来做选择。

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob http://www.cnblogs.com/hhhyaaon/p/5928152.html http://www.cnblogs.com/saysmy/p/5626337.html http://www.jb51.net/article/78215.htm

原文发布于微信公众号 - nodejs全栈开发(geekclass)

原文发表时间:2017-11-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券