input上传图片改变样式

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

<input type="file" id="file" accept="image/*">
<img src="./corver.png" alt="" class="img" id="img">

 <script src="./jquery-1.12.4.js"></script>
 <script>
       $('#file').on('change', function () {
            var rd = new FileReader();//创建文件读取对象
            files = this.files[0];//获取file组件中的文件
            
            //判断图片类型,如果不需要判断去掉第一个if()就好
            let fileType = files.type.slice(6, 10)
            if (fileType != 'jpg' && fileType != 'png' && fileType != 'jpeg' && fileType != 'bmp') {
                alert('仅支持jpg、jpeg、gif、png、bmp格式的图片，请重新上传图片')
                return
            } else {
                rd.readAsDataURL(files);//文件读取装换为base64类型
                rd.onloadend = function (e) {
                    //加载完毕之后获取结果赋值给img
                    document.getElementById("img").src = this.result;
                }
            }
        })

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

方法一：将原生的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;
    }

 <div class="btn-box">
        <button class="btn">上传图片</button>
        <input type="file" id="file" accept="image/*" class="file-ipt">
    </div>

    <img src="./corver.png" alt="" class="img" id="img">

    <script src="./jquery-1.12.4.js"></script>
    <script>
          $('#file').on('change', function () {
            var rd = new FileReader();//创建文件读取对象
            files = this.files[0];//获取file组件中的文件
            
            //判断图片类型,如果不需要判断去掉第一个if()就好
            let fileType = files.type.slice(6, 10)
            if (fileType != 'jpg' && fileType != 'png' && fileType != 'jpeg' && fileType != 'bmp') {
                alert('仅支持jpg、jpeg、gif、png、bmp格式的图片，请重新上传图片')
                return
            } else {
                rd.readAsDataURL(files);//文件读取装换为base64类型
                rd.onloadend = function (e) {
                    //加载完毕之后获取结果赋值给img
                    document.getElementById("img").src = this.result;
                }
            }
        })
    </script>

方法二：将原生的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;
    }

 <div class="btn-box">
        <button class="btn">上传图片</button>
        <input type="file" id="file" accept="image/*" class="file-ipt">
    </div>

    <img src="./corver.png" alt="" class="img" id="img">

    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('.btn').on('click',function(){
            $('#file').click() //点击按钮触发input
        })

          $('#file').on('change', function () {
            var rd = new FileReader();//创建文件读取对象
            files = this.files[0];//获取file组件中的文件
            
            //判断图片类型,如果不需要判断去掉第一个if()就好
            let fileType = files.type.slice(6, 10)
            if (fileType != 'jpg' && fileType != 'png' && fileType != 'jpeg' && fileType != 'bmp') {
                alert('仅支持jpg、jpeg、gif、png、bmp格式的图片，请重新上传图片')
                return
            } else {
                rd.readAsDataURL(files);//文件读取装换为base64类型
                rd.onloadend = function (e) {
                    //加载完毕之后获取结果赋值给img
                    document.getElementById("img").src = this.result;
                }
            }
        })
    </script>

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

  <input type="file" class="mob-fileIpt" accept="image/*" onchange="uploadImg(this)" id="file">
 <img src="./corver.png" alt="" class="img" id="img">

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;
	    }
    
    }
}