<! DOCTYPE html>
< html >
< head lang = "en" >
< meta charset = "UTF-8" >
< title ></ title >
</ head >
< body >
< img src = "" alt = "" id = "Cimg" style = "width:200px; height:200px;border-radius:200px;border:1px solid red; " />
< input type = "file" id = "fi" onchange = "imagePreview(this)" />
< script type = "text/javascript" >
function imagePreview ( input ){
var files = input . files ;
//Assume that "preview" is the div of the image to be displayed
var preview = input . parentNode ;
for ( var i = zero ; i < files . length ; i ++ ) { //Preview the newly added picture
var file = files [ i ];
var imageType = /^image\// ;
if ( ! imageType . test ( file . type ) ) {
alert ( "Please select a picture type to upload" );
continue ;
}
var img = document . getElementById ( "Cimg" )
img . classList . add ( "obj" );
img . file = file ;
img . style . width = "100px" ;
preview . appendChild ( img );
var reader = new FileReader ();
reader . onload = ( function ( aImg ) {
return function ( e ) {
aImg . src = e . target . result ;
};
})( img );
reader . readAsDataURL ( file );
}
}
</ script >
</ script >
</ body >
</ html >
