先展示效果圖：

（上傳圖片後的樣子）

沒有美化之前的樣式（外面的input框是我自己加上去的）

ok，說一下思想，首先是建一個input框，type設定為file，但是必須是隱藏的，因為不隱藏就變會顯示預設的樣子，我覺得有點醜，接著再建一個input框，type設定為text就可以了，用來存放我們上傳的檔案路徑，然後，設定一個a標籤，樣式取boostrap的按鈕樣式，當然，你喜歡的話，可以直接建一個按鈕，將按鈕浮動起來（float：left）然後拼在一起，在js中設定，點選a標籤的時候，自動執行點選type=file的input框。ok，大功告成，程式碼如下：

<input name="hotelImgFile" id="hotelImgFile" type="file" style="display: none"/>   //隱藏的input，真正的上傳檔案框
<div class="input-append">           //設定div 樣式來自boostrap
       <input id="photoCover" type="text" class="form-control"   //我們能看到的input框
        style="float: left; width: 350px" >
 

        <a class="btn btn-default" style="border-radius: 0px; width: 50px"
        onclick="$('input[id=hotelImgFile]').click();">瀏覽</a>
</div> 

//圖片上傳賦值事件

<script type="text/javascript">
$('input[id=hotelImgFile]').change(function() {
   $('#photoCover').val($(this).val());
});

</script>
 

注意事件：如果沒有匯入boostrap和jQuery的相關檔案，會沒有效果的，相關檔案大概是這些（每個人將他們放的路徑不同，別直接複製進去就算了，檢視路徑是否正確）：

<link href="css/style.min.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>