JS中利用FileReader实现上传图片前本地预览功能

引子

平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上，这样做在图片比较小的时候没什么问题，大一点的话就会比较慢才能看到预览了，而且还产生了垃圾文件，所以比较好的是上传之前先在本地预览一下。

之前做项找插件的时候就知道纯前端可以实现图片本地预览，可今天面试的时候被问到时竟然一脸懵逼，然后竟然无意中就在电脑桌面发现了实现的demo，然后根据demo查了一下API，稍微总结下：

首先得拿到File对象

当用input标签上传图片时event对象中会包含file对象的一个集合

event.target.files

核心是FileReader对象

根据MDN上的说法：

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

首先要作为构造函数得到一个FileReader的实例对象

var freader = new FileReader();

利用readAsDataURL()方法读取指定的内容

freader.readAsDataURL(file);

最后就是一个事件处理，相当于监控读取进度，我们这里是当读取完成时渲染图片，所以用onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

这里架加载完成之后最终得到的是一个base64编码的src地址，具体为什么下次查清楚了再专门写篇关于base64编码的文章

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action="">
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px">
 </form>
 <script>
 function changImg(e){
 var myImg = document.getElementById('myImg');
 for (var i = 0; i < e.target.files.length; i++) {
 var file = e.target.files[i];
 console.log(file);
 if (!(/^image\/.*$/i.test(file.type))) {
  continue; //不是图片 就跳出这一次循环
 }
 //实例化FileReader API
 var freader = new FileReader();
 freader.readAsDataURL(file);
 freader.onload = function(e) {
  console.log(e);
  myImg.setAttribute('src', e.target.result);
 }
 }
 }
 </script>
</body>
</html>

后记

通过这件事就暴露了我学习新东西的一个问题，就是查出来看一遍觉得知道了就行了，这种习惯是特别害人的，以后每当有个疑问查出来之后不仅要查是怎么做的，还要了解一下为什么可以这么做，所谓知其然知其所以然。还有就是平时的代码能用手敲的尽量别复制，复制一时是爽了，可要手写的时候写不出来也是听尴尬的。

今天是来杭州的第三天，面试的第二天，这两天的面试中暴露出的一个重要问题就是平时太依赖搜索引擎，用脑太少，连一些简单API就没记全，前端确实还是有很多东西就是要牢牢记住的，没什么捷径可走，这些东西就是基础，没记住就是基础差。虽然你并不影响你做出东西来，但会影响开发效率，技术要往上走，这个基石必须稳，加油记吧！

总结

以上所述是小编给大家介绍的JS中利用FileReader实现上传图片前本地预览，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • Angularjs实现上传图片预览功能
  • 简单实现JS上传图片预览功能
  • angularjs点击图片放大实现上传图片预览
  • JS实现的图片预览插件与用法示例【不上传图片】
  • js实现上传图片预览方法
  • JS HTML5拖拽上传图片预览
  • 浅谈js图片前端预览之filereader和window.URL.createObjectURL
  • javascript结合fileReader 实现上传图片
赞 (0)

相关推荐

  • Angularjs实现上传图片预览功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <input type="file" ng-file-select="onFileSelect($files)" accept="image/*"> app.factory("fileReader", function($q, $log) { var onLoad = function(reader, deferred, scope) { return func

  • angularjs点击图片放大实现上传图片预览

    angularjs点击图片放大实现上传图片预览

    本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span

  • js实现上传图片预览方法

    js实现上传图片预览方法

    图片预览的 javascript 本地操作 早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 上图的html <tr> <td>缩略图</td> <td> <a href="javascript::void(0)" class="fileBtn&qu

  • 浅谈js图片前端预览之filereader和window.URL.createObjectURL

    浅谈js图片前端预览之filereader和window.URL.createObjectURL

    浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0]; var fr = new FileReader(); fr.onload = function(ele){ va

  • javascript结合fileReader 实现上传图片

    关于File API这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量. 复制代码 代码如下: function getImgSrc(target, callback) {     if (window.FileReader) {         var oPreviewImg = null, oFReader = new window.FileR

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JS实现的图片预览插件与用法示例【不上传图片】

    JS实现的图片预览插件与用法示例【不上传图片】

    本文实例讲述了JS实现不需要上传的图片预览插件与用法.分享给大家供大家参考,具体如下: 小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 简单实现JS上传图片预览功能

    js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

  • JS中利用FileReader实现上传图片前本地预览功能

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下. 之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象 当用input标签上传图片时event对象中会包含

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

  • jquery实现图片上传前本地预览功能

    jquery实现图片上传前本地预览功能

    本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

  • Ajax上传图片及上传前先预览功能实例代码

    Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • JS实现的input选择图片本地预览功能示例

    JS实现的input选择图片本地预览功能示例

    本文实例讲述了JS实现的input选择图片本地预览功能.分享给大家供大家参考,具体如下: 预览效果见下图: HTML代码如下: <div class="content" style="margin-top:100px;height:200px;"> <div id="div4bm" style="float:left;"> <!--input[button] 触发 file click事件--&g

  • 基于jquery实现图片上传本地预览功能

    当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U

  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • laravel框架上传图片实现实时预览功能

    在laravel框架中上传图片并实时预览,其实并没有那么难,下面给大家展示一下: HTML代码: <img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src=""> <input type="file" name="house_

  • jquery实现图片上传前本地预览

    jquery实现图片上传前本地预览

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

  • jquery实现兼容浏览器的图片上传本地预览功能

    一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,

随机推荐