圖片預覽新特性 h5 FileReader
圖片預覽新特性 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>