JS实现本地图片在线图片预览无需上传服务器

忆丶荒年

于 2017-06-14 10:05:36 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： javascript 在线预览

本文链接：https://blog.csdn.net/cl799667803/article/details/73200769

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先我们需要添加一个图片预览框和‘上传选择’按钮：

<div id="preview"></div>  
<input type="file" onchange="preview(this)" />

接着给图片预览框添加样式（当然这里是很简单的样式）：

<style type="text/css">  
        #preview, .img, img  
        {  
        width:200px;  
        height:200px;  
        }  
        #preview  
        {  
        border:1px solid #000;  
        }  
    </style>

为防止出现乱码需要添加：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

最后就是写js:

<script type="text/javascript">    
        function preview(file)  
        {  
            var prevDiv = document.getElementById('preview');  
            if (file.files && file.files[0])  
            {  
                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>