JS input type=file 按钮修改样式 及 选择图片后预览

修改<input type='file'>实现思路，通过<label>标签来实现

将<input type='file'>隐藏掉，然后修改<label>标签中的内容及样式

<form action="" method="post" enctype='multipart/form-data'>
    <div class="wx_box">
        <label for='my_file' class='inputlabelBox'>
            <img class="img" src='/Public/img/upload.png' width="80%">
        </label>
        <input type="file" name="myfile" id='my_file' style="display:none;" accept="image/*"/>

    </div>
</form>

<script>
    $("#my_file").change(function() {
        $(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
    });
</script>

如上所述，我将上传图片的按钮的样式修改为了一个图片，当我选择图片后，改变图片的src值

效果如下：

 

 accept="image/*"