<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> File Upload </ title>
<style>
#box{
width: 400px;
height: 400px;
border: 1px solid #ccc;
margin: 20px 20px;
}
</style>
</head>
<body>
<input type="file">
<div id = "box"></div>
<Span> image upload progress: </ span>
<progress min="0" max="0" value="0"></progress>
</body>
<script>
// Get element
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;
/**
The first to use this input to read the file, and then use the resulting object file read a file path, file path and then assigned to the img tag.
**/
// Read file information
var file = e.target.files[0];
// instantiate read target file; the FileReader () itself is an object JS
var reader = new FileReader();
// read file file URL information
reader.readAsDataURL(file);
reader.onload = function(){
// Create a target img
var img = document.createElement('img');
img.src = this.result;
img.style.width = '400px';
img.style.height = '400px';
box.appendChild(img);
}
// file read progress bar
reader.onprogress = function(ent){
//ent.loaded is the current overall progress is progress ent.total
progress.value = ent.loaded / ent.total;
}
}
</script>
</html>