html5圖片上傳預(yù)覽示例分享

字號(hào)： 小 中 大


    代碼如下:
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <meta name="author" content="EdieLei" />
    <title>HTML5 圖片上傳預(yù)覽</title>
    <script type="text/javascript" src="<a ></script</a>>
    <script type="text/javascript">
    $(function(){
    $('#img').change(function(){
    var file = this.files[0]; //選擇上傳的文件
    var r = new FileReader();
    r.readAsDataURL(file); //Base64
    $(r).load(function(){
    $('div').html('<img src="'+ this.result +'" />');
    });
    });
    });
    </script>
    </head>
    <body>
    <h3>HTML5 圖片上傳預(yù)覽</h3>
    <input id="img" type="file" accept="image/*" />
    <div></div>
    </body>
    </html>