使用FileReader实现前端图片预览
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">
<script>
var fileInput = document.querySelector('input[type=file]'),
previewImg = document.querySelector('img');
fileInput.addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
// 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
reader.addEventListener("load", function () {
previewImg.src = reader.result;
}, false);
// 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(file);
}, false);
</script>
</body>
</html>
关于图片预览的就写到这里啦，如果哪些地方写得不对或者问题的，亲们可以在评论提出~
使用FileReader实现前端图片预览的更多相关文章
- 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- HTML5时代的纯前端上传图片预览及严格图片格式验证函数（转载）
原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- ext图片预览功能实现，前端代码
效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- webform的原生操作图片预览和上传
1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...
随机推荐
- Python正则表达式，统计分析nginx访问日志
目标: 1.正则表达式 2.oop编程,统计nginx访问日志中不同IP地址出现的次数并排序 1.正则表达式 #!/usr/bin/env python # -*- coding: utf-8 -*- ...
- 使用node-livereload自动刷新页面
1. 安装node 2. 安装python 3. 安装connect, serve-static和node-livereload (以下都假设命令行当前目录为e:\WebSite) e:\WebSit ...
- Content Provider 小结
Android中的四大组件之一ContentProvider,它支持多个应用间进行存储和读取数据等操作,实现不同应用间的数据共享. ContentProvider,解释为内容提供商.顾名思义,就是对外 ...
- oracle查看表空间物理文件的名称，路径及大小
select tablespace_name, file_id,file_name,round(bytes/(1024*1024),0) total_space from dba_data_files ...
- Linux/hp unix/AIX日常巡检脚本（转）
以下为Linux/hp unix/AIX日常巡检脚本,大家可以参考着进行改写,用于自己的服务器. #!/usr/bin/ksh syserrdate=`date +"%m/%d"` ...
- linux日常巡检脚本
######################以下是脚本内容开始部分###################################### #!/bin/bash #set -x2012-02-2 ...
- Cdoefroces #354
A题 题意:给定一些数,然后求一次交换以后最大的数和最小的数之间的最大距离 分析:找到最大数和最小数的位置,然后判断是把位置大的移到最后还是把位置小的移到开始位置即可 #include <ios ...
- lpc1768ADC使用
Lpc1768内置有一个ad外设,该外设有八路复用输入,所以,可以同时接八路ad设备,同时还支持触发转换模式,由外部端口进行ad触发,ad转换完成之后可以产生中断 Lpc1768支持的转换模式有两种, ...
- Delphi 常用函数(数学函数）round、trunc、ceil和floor
源:Delphi 常用函数(数学函数)round.trunc.ceil和floor Delphi 常用函数(数学) Delphi中怎么将实数取整? floor 和 ceil 是 math unit 里 ...
- mysql 5.5中文乱码问题
一.登录MySQL查看用SHOW VARIABLES LIKE ‘character%’;下字符集,显示如下:+--------------------------+----------------- ...