图片上传后及时预览

最新推荐文章于 2024-08-18 10:54:05 发布

bangbang0203

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/FlyingPuPu/p/5450428.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta content="charset=utf-8" />
        <!--设置图片上传后预览的div样式-->
        <style type="text/css">
            *{
                float:left;
                margin:0;
            }
            body>div{
                width:200px;
                height:225px;
                text-align:center;
            }
            #preview, .img, img
            {
                width:200px;
                height:200px;
            }
            #preview
            {
                border:1px solid #000;
            }
            input{
                width:200px;
            }
        </style>
    </head>
    <body>
        <input type="file" onchange="preview(this)" />
        <div>
            <h3>图片预览</h3>
            <div id="preview"></div>
        </div>
        
        <script type="text/javascript">
            function preview(file)
            {
                var prevDiv = document.getElementById('preview');
                if (file.files!=null && file.files[0]!=null){
                    var reader = new FileReader();
                    reader.onload = function(evt){
                        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                    };
                    reader.readAsDataURL(file.files[0]);
                }
                else{
                    prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
                }
            }
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/FlyingPuPu/p/5450428.html

bangbang0203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传后及时预览

<!DOCTYPE html><html> <head> <meta content="charset=utf-8" />  <style type="text/css"> *...
复制链接

扫一扫