<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<style>
#box{
400px;
height: 400px;
border: 1px solid #ccc;
margin: 20px 20px;
}
</style>
</head>
<body>
<input type="file">
<div id = "box"></div>
<span>图片上传进度：</span>
<progress min="0" max="0" value="0"></progress>
</body>
<script>
//获取元素
var input = document.getElementsByTagName('input')[0];
var box = document.getElementById('box');
var progress = document.getElementsByTagName('progress')[0];
input.onchange = function(e){
var e = window.event || e;
/**
首先使用input读取这个文件，然后使用文件读取对象得到文件路径，再将文件路径赋值给img标签。
**/
//读取文件信息
var file = e.target.files[0];
//实例化文件读取对象;FileReader()是JS自身的对象
var reader = new FileReader();
//读取file文件的URL信息
reader.readAsDataURL(file);
reader.onload = function(){
//创建一个img对象
var img = document.createElement('img');
img.src = this.result;
img.style.width = '400px';
img.style.height = '400px';
box.appendChild(img);
}
//文件读取进度条
reader.onprogress = function(ent){
//ent.loaded是当前进度 ent.total是总体进度
progress.value = ent.loaded / ent.total;
}
}
</script>
</html>