图片上传显示
input标签type=“file” 支持文件上传,multiple表示支持多文件同时上传
<input type="file" multiple>
文件上传会自动触发input的onchange事件,
files的内部存储了上传文件的属性
input.onchange=function(){
console.log(this.files);//this.files存储了文件的属性
}
上传的图片还需显示在dom元素中,H5提供了FileReader这个构造函数让我们读取本地的文件
读取TXT文本时需注意,要UTF-8格式文件
具体步骤如下:
var reader=new FileReader() //创建对象
reader.readAsText(文本文件) //读取文本文件(文本文件需保存UTF-8格式)
reader.readAsDataURL(图片文件) //读取图片文件
reader.onload=function(){ //读取好之后执行,异步函数
console.log(this.result) //this.result是onload加载后的资源
}
上传代码实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" multiple>
<script>
/*
* files 这个存储了 上传文件的集合
*
* */
var input = document.querySelector('input')
//当文件上传时 会触发回调函数
input.onchange = function(){
console.log('文件上传了');
var file = this.files[0]
console.log(file);
//生成一个有读取文件能力的对象
var reader = new FileReader()
//读取图片
reader.readAsDataURL(file)
//等文件读取对象 读完了file的数据之后 会触发onload事件
reader.onload = function(){
console.log('文件读取完成');
console.log(this.result)
//创建img节点 document.createElement('img')
var oImg = new Image();
oImg.src = this.result ; //异步代码
oImg.width = 200;
oImg.onload = function(){
document.body.appendChild(this)
}
}
}
</script>
</body>
</html>