hilongjw
hilongjw
  • 发布:2015-02-06 15:36
  • 更新:2015-02-06 15:36
  • 阅读:2465

怎么实现html5图片预览

分类:HBuilder

桌面浏览器可以预览,在app里不能实现预览。
测试也是支持FileReader。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <input id="iii" name="uploadfile" type="file">  
            <img id="previewImage">  
        </div>  

        <script type="text/javascript">  
            document.getElementById('iii').onchange = function(evt) {    

                // 如果浏览器不支持FileReader,则不处理    

                //if (!window.FileReader) return;    

                var files = evt.target.files;    

                for (var i = 0, f; f = files[i]; i++) {    

                    if (!f.type.match('image.*')) {    

                        continue;    

                    }    

                    var reader = new FileReader();    

                    reader.onload = (function(theFile) {    

                        return function(e) {    

                            // img 元素    

                            document.getElementById('previewImage').src = e.target.result;    

                        };    

                    })(f);    

                    reader.readAsDataURL(f);    

                }    

            }  
        </script>  
    </body>  

</html>
2015-02-06 15:36 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复