js实现图片上传预览功能

作者: 红烧肉在锅里呀 | 来源:发表于2019-03-21 11:23 被阅读0次

  <div id="preview"></div>
        <input type="file" onchange="preview(this)" />
        <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>

效果如下