专栏首页Node.js开发用html5实现图片预览功能

用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),作者:陈友谅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何浏览器里用js解析excel文件

    上篇文章给大家介绍了如何借助nodejs平台解析操作excel,今天给大家介绍如何在浏览器端使用js解析操作excel。

    挥刀北上
  • nodejs如何解析excel

    用nodejs操作excel需要借助一个npm包,包名称为:node-xlsx,包的地址为:https://www.npmjs.com/package/node...

    挥刀北上
  • 一道关于并发控制的面试题

    很久以前发了一篇文章,文章里主要探讨了这样一个问题,页面中需要发送多次ajax请求,如何确保所有数据返回后才对数据一起进行操作,文章名称为:

    挥刀北上
  • 云原生计算基金会(CNCF)宣布 京东获得终端用户奖

    中国上海 – 2018 年11月15日 – KubeCon + CloudNativeCon 中国论坛 – 支持并集成 Kubernetes® 和 Promet...

    京东技术
  • Hive Query生命周期 —— 钩子(Hook)函数篇

    无论你通过哪种方式连接Hive(如Hive Cli、HiveServer2),一个HQL语句都要经过Driver的解析和执行,主要涉及HQL解析、编译、优化器处...

    大数据学习与分享
  • Java Maven编译时没问题,运行时报java.lang.NoSuchMethodError

    有一个依赖,父类pom有是一个版本是1.1,但是很老了,是公共使用的。 A模块–>引用–>B模块 ,B模块中是3.3,B模块也引用C父模块 A模块的父模块C...

    MickyInvQ
  • JS 前20个常用字符串方法及使用方式

    charAt(x) charCodeAt(x) concat(v1,v2..) fromCharcode(c1,c2) indexOf(substr, ...

    Javanx
  • css篇-面试题7-说一说rem与em的区别并如何做移动端适配

    rem 是基于 html 元素的字体大小来决定,而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的,一般默认情况下...

    itclanCoder
  • 机器人机械简图汇总

    根据前期与ABB、FUNAC、KUKA和MOTOMAN四家公司的提供的资料,对其典型产品进行了机械结构分析,具体情况罗列下表,供参阅。 按照活动度多少大体分为...

    机器人网
  • 【JVM调优】----内存溢出和内存泄漏

    项目的开发,涉及到了服务器的运维,先来介绍下JVM相关的知识,也方便后期的使用。今天主要是说一说内存溢出和内存泄漏两件事。

    令仔很忙

扫码关注云+社区

领取腾讯云代金券