上传图片预览

最新推荐文章于 2024-09-24 11:55:49 发布

diaocan1911

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theEndOfSummer/p/4488072.html

版权

原生的input type="flie"很不美观的，一般将其设置成透明度为0，绝对定位在美化后的元素之上。但是在选择图像后，没有任何操作显示我的图片已经传了，所有在这里要实现一个功能：

在上传按钮的下边添加一个占位标签img，在input onchange的时候，将图片显示在img位置。

html：

<div class="uploadImg clearfix">
    <input type="button" value="上传户型图">
    <input id="file" type="file" accept="image/*;capture=camera" onchange="showPreview(this);">
</div>

javascript：

<script type="text/javascript">
        
        function showPreview(source){
            var file=source.files[0];
            if(window.FileReader){
                var fr = new FileReader();
                fr.onloadend = function(e){
                    document.getElementById("imgbox").src=e.target.result;
                };
                fr.readAsDataURL(file);
            }
        }    
</script>

id="imgbox"为图片容器。

οnchange="showPreview(this.value);传递的参数是图片的名称。

参考地址：

http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml

转载于:https://www.cnblogs.com/theEndOfSummer/p/4488072.html