前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）；
但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端；
二是，我今天写的内容，使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容；此种方法可以优化图片加载速度，减少方法一占用带宽的问题；
但是，此种方法兼容性存在问题，主要是IE浏览器（ie10以上没问题），本文不在讨论兼容性问题，代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
#preview {
display: inline-block;
width: 2.56rem;
height: 2.56rem;
position: relative;
background-image: url(img/iconfont-tianjia.png);
background-repeat: no-repeat;
background-size: cover;
} #file {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 5;
}
</style>
</head>
<body>
<div id="preview">
<input type="file" accept="image/*" id="file" value="" />
</div>
<script type="text/javascript">
var preview = document.querySelector('#preview');
var eleFile = document.querySelector('#file');
eleFile.addEventListener('change', function() {
var file = this.files[0];
// 确认选择的文件是图片
if(file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
// 图片base64化
var newUrl = this.result;
preview.style.backgroundImage = 'url(' + newUrl + ')';
};
}
});
</script>
</body> </html>
直接复用测试即可，FileReader对象是通过将图片url转换成base64格式，然后显示出来。
前端实现input[type='file']上传图片预览效果的更多相关文章
- 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册
一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- input[type=file]上传图片及转为base64码以及预览
<input type="file" id="imgurl" capture="camera" accept="image/ ...
- input file上传图片预览，非插件
Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 关于input type=file上传图片的总结
最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...
- input type = file 上传图片转为base64
项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
随机推荐
- 深入理解B/S与C/S架构
首先来介绍一下B/S与C/S架构 C/S架构简要介绍 在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构: C/S架构是第一种比较早的软件架构,主要用于局域网内.也叫 客户机/服务器模式. ...
- C#中的Socket
];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...
- iOS项目开发实战——制作视图的缩放动画
视图的大小应该是随时可控的.今天我们就来实现对一个View的缩放动画.该动画的实现与位移动画,透明度动画稍有不同. 详细实现例如以下: import UIKit class ScaleViewCont ...
- 多线程编程TSL相关的技术文档
线程本地存储 (TLS) https://msdn.microsoft.com/zh-cn/library/6yh4a9k1(v=vs.80).aspx Using Thread Local Stor ...
- c10---多文件开发
a.h // // lisi.h // 注意: .h是专门用来被拷贝的, 不会参与编译 #ifndef day05_lisi_h #define day05_lisi_h int sum(int v1 ...
- angularjs1- ng-include
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Linux 下安装apache2.4
Linux 下安装apache2.4 下载,解压,配置安装! 好生麻烦! 安装一个apache,需要很多依赖!比如apr.apr-util.pcre等等. 这些依赖有可能还需要别的更多的依赖! 真心的 ...
- php5.5安装笔记
这次没想到本来很简单的php编译,没想到遇到那么多问题.再此记录一下. 1.php5.5编译安装主要有一个难点,就是GD库的问题,因为php5.5的GD库必须是2.1以上的版本哦 原来都是用的gd2. ...
- POJ 3260 DP
只需要对John的付款数做一次多重背包,对shopkeeper的找零钱数做一次完全背包即可. 最重要的是上界的处理.可以注意到,John的付款数最多为maxv*maxv+m,也就是24400元.同理, ...
- 火狐浏览器下载文件中文乱码，文件名中的空格变加号("+")的问题
解决一下问题: 1.火狐浏览器下载文件,中文变乱码 2.IE浏览器下载文件,丢失文件扩展名或强制扩展名为".txt" 3.浏览器下载文件,文件名中的空格变成加号("+&q ...