<!doctype html>
<html> <head>
<meta content="text/html; charset=GBK" http-equiv="Content-Type" />
<title>Image preview example</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px #A3BFE7 solid;
} img {
width: atuo;
height: atuo;
}
</style>
<script type="text/javascript">
function viewPic() {
var oFReader = new FileReader();
oFReader.onload = function(e) {
document.getElementById("uploadPreview").src = e.target.result;
}
if(document.getElementById("uploadImage").files.length === 0) {
return;
}
var oFile = document.getElementById("uploadImage").files[0];
oFReader.readAsDataURL(oFile); }
</script>
</head> <body> <input id="uploadImage" type="file" name="myPhoto" onchange='viewPic();' /><br> <img id="uploadPreview" src="" /> </body> </html>
效果：
