效果圖：

前端程式碼：

<div class="role" onclick="document.getElementById('cover').click()">
      <img src="" alt="" id="cover_1" class="img">
      <span style="color: #ccc;">+</span>
      <input type="file"  name="goodsImg" value="" id="cover" onchange="l(this)">
</div>
 

 css樣式：

.role input[type='file']{opacity:0;}
.role input[type='text']{text-align: center;width: 100%;height: 25px;border: 0;}
.role{border:1px solid #c9cccf;text-align: center;width: 200px;height: 200px;line-height: 200px;font-size: 18px;margin-top: 15px;}
.role .img{width: 198px;height: 198px;display: none;}
 

JS程式碼：

<script type="text/javascript">

    function l(evn){
        var id = $(evn).attr('id');//獲取id
        var num = id+"_1";
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //監聽檔案讀取結束後事件
            reader.onloadend = function (e) {
           
                $("#"+num).css("display","block");
                $("#"+num).attr("src",e.target.result);    //e.target.result就是最後的路徑地址
            };
        }
    }
</script>