• input上传图片并显示


    html:

    <div id="click">
    <img>
    </div><!--照片预览的div --> <div class="choice_pic" id="choice_pic"><input type="file" name="" id="choice_p" onchange="previewFile()"></div> <!--input设置为file的类型,透明度设置为0,id为choice_pic的div模拟选择图片的按钮 -->

    js(原生)

    <script type="text/javascript">
            document.getElementById('choice_p').addEventListener('change',function(e){
                var files = this.files;
                var img = new Image();
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function(e){
                    var mb = (e.total/1024)/1024;
                        if(mb>= 2){
                            alert('文件大小大于2M');
                        return;
                        }
                    img.src = this.result;
                    img.style.width = "80%";
                    document.getElementById('click').style.width="180px";
                    document.getElementById('click').style.height="180px";
                    document.getElementById('click').innerHTML = '';
                    document.getElementById('click').appendChild(img);
            }
        });
        </script>
  • 相关阅读:
    Apache2.4.x与Apache2.2.x的一些区别
    ubuntu下的apache的虚拟主机的配置
    mysql的事物
    javascript的预编译和执行顺序
    ubuntu下的词典的安装
    ubuntu下的apache+php+mysql的安装
    mysql的架构
    session
    cookie
    JavaScript实例-----反选
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7606399.html
Copyright © 2020-2023  润新知