上传图片时本地先预览如何实现
这次给大家带来上传图片时本地先预览如何实现，实现上传图片时本地先预览的注意事项有哪些，下面就是实战案例，一起来看一下。
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是上传图片时本地先预览如何实现的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
汽水音乐本地音乐怎么添加
Feb 23, 2024 pm 07:13 PM
汽水音乐本地音乐怎么添加?汽水音乐APP中可以添加自己喜爱的本地音乐，但是多数的小伙伴不知道如何添加本地音乐，接下来就是小编为用户带来的汽水音乐本地音乐添加方法图文教程，感兴趣的用户快来一起看看吧！汽水音乐使用教程汽水音乐本地音乐怎么添加1、首先打开汽水音乐APP，主页面最下方【音乐】功能专区点击;2、之后进入到播放页面，点击右下角【三个点】图标;3、最后下方展开功能栏，选择其中【下载】按钮即可添加到本地音乐。
PHP保存远程图片到本地后如何添加水印并保存？
Jul 11, 2023 pm 11:48 PM
PHP保存远程图片到本地后如何添加水印并保存？在PHP开发中，经常会遇到需要将远程图片保存到本地的需求。而有时候，我们可能还需要在保存后的图片上添加水印以保护版权或增加额外信息。本文将介绍如何使用PHP保存远程图片到本地，并在保存后的图片上添加水印。一、保存远程图片到本地首先，我们需要使用PHP的文件操作函数将远程图片保存到本地。下面是一个简单的示例代码：&
Vue中如何实现图片的滚动和缩略图预览？
Aug 18, 2023 pm 01:51 PM
Vue中如何实现图片的滚动和缩略图预览？在Vue项目中，我们经常需要展示大量的图片，并希望用户能够方便地浏览和预览这些图片。本文将介绍如何使用Vue组件实现图片的滚动和缩略图预览功能。首先，我们需要安装并引入合适的Vue库，以便于实现图片的滚动和缩略图预览。在本例中，我们将使用vue-awesome-swiper和vue-image-preview两个库来实
未来功能抢先用 Safari 技术预览 173 版本释出
Jul 02, 2023 pm 01:37 PM
Apple今日释出了Safari技术预览173版本，涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统，有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块，取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能，并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具，以便建立网页、网页应用程序、其他应用程序中的网页内容、
哈医大临床药学就业是否有前途(哈医大临床药学就业前景怎么样)
Jan 02, 2024 pm 08:54 PM
哈医大临床药学就业前景如何尽管全国就业形势不容乐观，但药科类毕业生仍然有着良好的就业前景。总体来看，药科类毕业生的供给量少于需求量，各医药公司和制药厂是吸纳这类毕业生的主要渠道，制药行业对人才的需求也在稳步增长。据介绍，近几年药物制剂、天然药物化学等专业的研究生供需比甚至达到1∶10。临床药学专业就业方向：临床医学专业学生毕业后可在医疗卫生单位、医学科研等部门从事医疗及预防、医学科研等方面的工作。就业岗位：医药代表、医药销售代表、销售代表、销售经理、区域销售经理、招商经理、产品经理、产品专员、护
Win11 apk安装指南
Jan 03, 2024 pm 10:24 PM
众所周知，微软宣布了win11将能够运行安卓应用程序，并且可以安装本地apk，但是在更新win11之后用户发现自己不知道怎么安装本地apk，其实是因为目前微软还没有为win11实装这款功能，需要等待功能实装才能使用。win11怎么安装本地apk：1、根据微软的说法，win11在实装了这个功能之后，直接双击下载好的apk文件就可以直接安装了。2、安装完成后用户也可以直接在系统中运行了。3、虽然现在已经是正式版win11了，但是微软目前还没有为win11实装这个功能。4、所以如果用户想要在win11
如何在Vue表单处理中实现表单的图片上传与预览
Aug 10, 2023 am 11:57 AM
如何在Vue表单处理中实现表单的图片上传与预览引言：在现代Web应用程序中，表单处理是一个非常常见的需求。其中一个常见的需求是，允许用户上传图片并在表单中预览这些图片。Vue.js作为前端框架，为我们提供了丰富的工具和方法来实现这个需求。在本文中，我将向您展示如何在Vue表单处理中实现图片上传和预览的功能。步骤一：定义Vue组件首先，我们需要定义一个Vue组
如何在uniapp中实现图片上传和预览
Oct 21, 2023 am 11:48 AM
如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中，图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能，并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中，首先需要在页面中添加一个图片上传组件，如下所示：<template><view><im
