本文共 1257 字，大约阅读时间需要 4 分钟。

上传图片直接使用<input type="file">的话，样式会比较难看：

接下来介绍两种改变样式的方法：

方法一：将原生的input样式设为透明，改变css，js不变

.img {
       width: 80px;    height: 80px;    border: 1px solid rgb(143, 59, 59);    }.btn-box {
       position: relative;    }.file-ipt {
       position: absolute;    left: 0;    top: 0;    opacity: 0; //将input设为透明    }.btn {
       width: 100px;    height: 30px;    background-color: skyblue;    color: white;    margin-right: 80px;    border: none;    border-radius: 10px;    }

   
        
    上传图片        
        
   
            

方法二：将原生的input样式设为display:none，通过点击按钮事件再触发input的change事件

.img {
       width: 80px;    height: 80px;    border: 1px solid rgb(143, 59, 59);    }.file-ipt {
       display: none;    }.btn {
       width: 100px;    height: 30px;    background-color: skyblue;    color: white;    margin-right: 80px;    border: none;    border-radius: 10px;    }

   
        
    上传图片        
        
   
            

两种方法都可以实现，但是推荐方法一，更简单方便一些，也不容易出现bug，在js动态渲染数据时，直接在input标签内添加onchange事件即可

 function uploadImg(file){    if (file.files && file.files[0])    {	    var img = document.getElementById('img');	    var reader = new FileReader();		reader.readAsDataURL(file.files[0]);	    reader.onloadend = function(e){	    	img.src = e.target.result;	    }        }}

转载地址：http://lzrgn.baihongyu.com/