1: html content
<div id="pox">
<input id="filed" type="file" accept="image/*"/>
</div>
<div id="box">
<img id="imgshow" src="" alt=""/>
</div>
2: css content
<style>
#box{
width: 200px;
height: 200px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style>
3js content
<script>
//Trigger an event when the content of the input file changes
$('#filed').change(function(){
//Get the files array of the input file;
//$('#filed') gets the jQuery object, .get(0) converts it to the native object;
//Only one can be selected here by default, but the storage form is still an array, so use [0] for the first element;
var file = $('#filed').get(0).files[0];
//Create an object to read this file
var reader = new FileReader();
//Use this object to read the file file
reader.readAsDataURL(file);
//The method function that is executed after reading the file successfully
reader.onload=function(e){
//A parameter e returned after successful reading, the whole progress event
console.log(e);
//Select the img of the image to be displayed, and the src to be assigned to the img is in the result under target in e
// address in base64 encoded format
$('#imgshow').get(0).src = e.target.result;
}
})
</script
complete image preview
