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

图片上传前预览，应该算是一个普遍的需求，很多时候可能选中的图片并不是想要的那张，所以需要上传前预览下。

JS（浏览器中）是一门特殊的语言，它没有直接读写磁盘文件的权限，想要操作文件还得配合 <input type="file"/> 标签，而且通过这个标签获得的 File 对象是只读的，同时也无法获取到此文件所在的路径。那么，该如何显示预览呢？

1. 思路

直接显示路径不行，那就将图片转化成 data URL 或者说 Base64

2. 代码实现

因为使用原生 JS 操作 DOM 过于麻烦，以下示例使用 Vue，但是思路和方法是一样的！

html 部分示例：

<input type="file" @change="fileChange"/>
<img v-if="imgUrl" :src="imgUrl" alt=""/>

script 部分示例：

fileChange(e) {// 选中的文件列表，如果设置了多选，length 可能会大于 1const fileList = e.target.files;if (fileList.length === 0) {this.imgUrl = '';return;}const file = fileList[0];// 使用 FileReader 读取文件对象const reader = new FileReader();// 读取完毕后获取结果reader.onload = event => {this.imgUrl = event.target.result;};// 把文件对象作为一个 dataURL 读入reader.readAsDataURL(file);
}

效果展示：

欢迎转载，转载请注明出处：https://blog.kaguramea.me/archives/js-image-preview

JavaScript 实现图片上传前本地预览相关推荐

iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
jquery插件：图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
图片上传并且支持预览
首先这里先讲一个比较low的 <input type="file" id="file1" οnchange="preview1()"/ ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
webuploader结合php实现图片上传到本地和保存数据库
webuploader结合php实现图片上传到本地和保存数据库,核心功能是以下三点: 一.上传前图片预览二.上传图片到本地文件夹三.上传图片路径和图片对应的设备编号到mysql数据库 Webupl ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...

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

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

1. 思路

2. 代码实现

JavaScript 实现图片上传前本地预览相关推荐

最新文章

热门文章