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>

 

转载于:https://www.cnblogs.com/yuanxinru321/p/7606399.html