图片预览新特性 h5 FileReader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file"></br>
<div id="picBox"></div>
</body>
</html>
<!-- IE9以上的浏览器才可以使用 -->
<script type="text/javascript">
$(document).ready(function(){
var file=document.getElementById('file');
var picBox=document.getElementById('picBox');
file.onchange=function(){
var fileval=file.files[0];
var filereader=new FileReader();
filereader.readAsDataURL(fileval);
filereader.onload=function(){
var othis=this;
$("#picBox").append('<img src='+othis.result+' width="300" height="530" id="img"/>');
}
}
});
</script>