本地图片预览
方法 一:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
</
head>
<
body>
<
input
type=
"file"
id=
"file">
<
img
src=
"#"
alt=
"">
<
script>
//获取文件上传框 和 预览文件框
var file
= document.
querySelector(
'#file');
var img
= document.
querySelector(
'img');
//给文件上传框一个 input事件
file.
oninput
=
function () {
//获取图片文件
var flie
=
this.files[
0];
//获取图片地址
var url
= URL.
createObjectURL(flie);
//将图片地址复制给img 的 src属性
img.src
= url;
}
</
script>
</
body>
</
html>
//注意 : <1> input 事件 在就jQuery 中没有封装成 input( )方法
需要用 jQ对象.on(‘input’ , function(){ } ) 方法来实现
<2> input 事件 和change 事件的区别
Change事件 是在文本框失去焦点的时候触发;
Input事件 是随时监听文本框的变化;
本地预览是随时变化所以用input事件.
<3> input 事件是H5 新加的 有兼容问题.
方法 二:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
</
head>
<
body>
<
input
type=
"file"
id=
"file">
<
img
src=
"#"
alt=
"">
<
script>
var input
= document.
querySelector(
'input');
var btn
= document.
querySelector(
'button');
btn.
oninput
=
function () {
// 1 获取input里面的文件
var data
= input.files[
0];
// 2 创建一个读取文件的对象
var fr
=
new
FileReader();
// fr.readAsText(data);
// 读取图片文件 读取是一个需要花费时间的操作
fr.
readAsDataURL(data);
// 当读取完毕之后执行的事件
fr.
onload
=
function () {
// 得到结果
var result
= fr.result;
// console.log(result);
img.src
= result;
}
}
</
script>
</
body>
</
html>