通过点击图片进行上传文件（图片）并进行预览

改变上传文件的原样式
思路：把原来的input隐藏让被点击的图片占用input的位置
html

<form action=“” method="post">
	<img src="image/111.jpg" alt="代替input的图片" id="showImg" style="width:200px">
	<input type="file" name="" id="" value="" onchange="upload(this)"/>        
    <input type="submit" value="上传"/>
</form>

css

input[type="file"]{
//这里的高度撑着和图片一样大
height:200px;
opacity:0;
cursor:pointer;
}

js

function upload(obj){
        //获取展示图片的区域
        var img = document.getElementById("showImg"); 
        //获取文件对象
        let file = obj.files[0];
        //获取文件阅读器
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //给img的src设置图片url
            img.setAttribute("src", this.result);
        }
    }

关于处理不同大小的图片，实现缩放到固定尺寸，可以给img设置一个父级div,给这个div设置想要图片的固定宽度高度，再给img设置width=100%

<form action=“” method="post">
<div style="width=200px;">
	<img src="image/111.jpg" alt="代替input的图片"  id="showImg" style="width:100%">
</div>
<input type="file" name="" id="" value="" onchange="upload(this)"/>        
    <input type="submit" value="上传"/>
</form>