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/*"