| The code is as follows |
Copy Code |
| <!doctype html>
<meta content= "text/html; Charset=utf-8 "http-equiv=" Content-type "/>
<title>image Preview example</title>
<script type= "Text/javascript" >
Ofreader = new FileReader (), Rfilter =/^ (image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/ jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/ x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/ X-xbitmap|image/x-xpixmap|image/x-xwindowdump) $/i; Ofreader.onload = function (ofrevent) {
document.getElementById ("Uploadpreview"). src = oFREvent.target.result;
}; function Loadimagefile () {
if (document.getElementById ("Uploadimage"). Files.length = = 0) {return;}
var ofile = document.getElementById ("Uploadimage"). Files[0];
if (!rfilter.test (Ofile.type)) {alert ("You must select a valid Image file!");
Ofreader.readasdataurl (ofile);
}
</script>
<body onload= "Loadimagefile ();" >
<form name= "Uploadform" >
<table>
<tbody>
<tr>
<td> </td>
<td><input id= "uploadimage" type= "file" name= Myphoto "onchange=" Loadimagefile (); "/></td>
</tr>
</tbody>
</table>
<p><input type= "Submit" value= "Send"/></p>
</form>
</body>
|
More about the content reference
Ps://developer.mozilla.org/en/dom/filereader ">https://developer.mozilla.org/en/dom/filereader
