zoukankan      html  css  js  c++  java
  • 上传图片预览

    原生的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"为图片容器。

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

    参考地址:

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

  • 相关阅读:
    这些例子很炫,感兴趣的童鞋可以了解一下
    Java经典习题24
    Java经典习题23
    Java经典练习题22
    Java经典习题21
    Java经典习题20
    Java经典练习题19
    Java经典练习题18
    Java经典习题17
    Java经典习题16
  • 原文地址:https://www.cnblogs.com/theEndOfSummer/p/4488072.html
Copyright © 2011-2022 走看看