< input type ="file" class ="upload" id="impt_uploadBtn" />

HTML中file上傳控制元件，在各個瀏覽器中顯示的樣式不一樣，為了統一樣式，使用一下方式修改
主要是設定position元素，將input上傳控制元件相對父元素relative進行絕對定位，設定right,top值、opacity值使其在整個div裡面隱藏
並將span中“瀏覽”元素坐落在input[type=’file’]可點選區域內，當點選瀏覽，可以觸發上傳事件

全部程式碼：
HTML：

<p style=" display: inline"
 
>
   <span> 上傳檔案：</span >
   <input id="uploadFile" type="text" class= "text" placeholder="選擇檔案" disabled="disabled" />
</p>
<div class= "fileUpload impt_btn btn-primary">
    <span> 瀏覽</span >
    <input type= "file" class="upload" id="impt_uploadBtn" />
 

</div>

CSS：

.fileUpload {
     // 設定元素的相對定位，作用是使其子元素的absolute相對於此元素進行定位，
     position: relative;
     // 當規定內容溢位元素框時發生的行為，hidden：多出來的內容被隱藏，不可見
    overflow: hidden ;
    margin: 10px ;
}
.btn-primary{
     color: #FFF;// 設定字型顏色
background-color: #337AB7;// 背景色
border-color: #2E6DA4;// 邊框顏色
}
.impt_btn{
// 將此DIV物件呈遞為內聯物件，與周圍的內聯物件在同一行上顯示 
 

display: inline-block;
padding: 6px 12px ; 
font-size: 14px;
font-weight: normal;// 設定文字的粗細，normal:預設值
line-height: 1.42857;//設定行間距離，行高
text-align: center;// 中間顯示
white-space: nowrap;// 如何處理空白，nowrap：文字不會換行，文字會在同一行上繼續顯示，知道遇見<br>標籤
vertical-align: middle;// 元素垂直對齊方式，middle,將此元素放在父元素的中部
cursor: pointer;// 滑鼠實現手型
-moz-user-select: none;// 是文字不被選中，不允許使用者進行復制
-webkit-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;// 新增圓角邊框，將4個角，實現圓滑
}
// 設定上傳控制元件input樣式
input.upload {  
    // 絕對定位，相對於父元素中第一次出現relative進行定位，需設定，left,right,top,buttom值
     position: absolute;
    top: 0 ;
    right: 0 ;
    margin: 0 ;
    padding: 0 ;
    font-size: 20px ;
    cursor: pointer ;
    opacity: 0 ;// 設定元素透明度級別，透明：不顯示。0不顯示
    filter: alpha(opacity =0);// 相容IE
}

// 使該元素與其他行內元素顯示在一行，div是塊級元素，當設定了此元素後會具有行內元素作用 
style ="display: inline"
#uploadFile{
     line-height: 30px;
    height:30px;
    width:333px;
     color:#999999;
     border:1ps solid #ccc;
}
.text{
     color:#999999;
     border:1ps solid #ccc;
}