web頁面中，在需要上傳檔案時基本都會用到元素，它的預設樣式：
chrome下：
ie下：
不管是上面哪種，樣式都比較簡單，和很多網頁的風格都不太協調。
根據使用者的需求，設計風格，改變其顯示樣式的場合就比較多了。
如果，要像下面一樣做乙個bootstrap風格的上傳按鈕該如何實現。
搭建上傳按鈕所需的基本元素
上傳效果（chrome）：
現在看到的分兩行顯示。
外圍之所以沒有換成div，是因為在ie7-瀏覽器中，只要不是設成inline，它的寬度全都會撐開到能撐到的寬度。如果設成inline，那元素的寬度就無法調整，所以這裡用span然後設成inline-block能解決這樣的問題。
增加樣式將兩行變成一行
上傳css:
.fileinput-button效果：.fileinput-button input
預設是沒有淺藍色邊框，只有滑鼠去點選後，才會顯示，這裡顯示出來是為了看得清楚。
通過將外圍的span設成display:relative，將input設成display:absolute的方式讓他們都脫離文件流。
通過將input限定在外圍的span中進行絕對定位的方式讓本來兩行顯示的變成一行顯示。
實際上這裡已經overflow了，真正的寬度是「上傳」文字的寬度，修改fileinput-button樣式增加overflow: hidden
.fileinput-button效果：
很有意思，能看到上邊後右邊的藍色邊框了吧，其實就是把左邊和下邊的溢位部分給隱藏了。
這時候用滑鼠去點選「上傳」兩個字實際上是點在input上，能夠顯示「開啟」對話方塊，因為顯示層級上input要比「上傳」更靠近使用者。
注意input定位中的right，為什麼不用left定位。
當我們改成left後。
效果（chrome）：
效果（ie）：
在chrome下input元素中的選擇按鈕露出來，但是沒關係，可以通過後面的設透明的方式把它透明掉。
但是在ie下確是會把輸入框露出來，關鍵是滑鼠移到輸入框上時，指標會變成輸入狀態，這個就很沒法處理了。
通過right的定位方式把輸入框移到左邊去的方式，可以在ie下迴避出現滑鼠指標變成輸入態的情況。
透明input元素
css：
.fileinput-button效果：.fileinput-button input
input完全不見了蹤影，點選「上傳」依然有效。
可以支援ie8+。
引入bootstrap，並新增按鈕樣式
head中增加外部css和js的引用。
增加按鈕樣式。上傳效果：
解決大小問題
如果為fileinput-button樣式增加width:100px，將外圍的span設成寬100px，會發現點選下部是沒有反應的，原因就是input是預設大小，無法覆蓋下部。
可以通過為input設定乙個很大的字型大小將其撐大的方式來解決覆蓋問題，這裡就設個200px。
.fileinput-button input這樣就能解決覆蓋問題。
完成。如果是要相容ie7-可以參考jquery-file-upload中的寫法。
**：
上傳
input file檔案上傳
該提交方式只是提交普通表單 對於file組所選中的檔案內容是不上傳的，因此需要設定 enctype屬性 enctype multipart form data 多部分提交方式，但注意編碼問題 對於post方式，瀏覽器會對中文進行編碼處理，傳送位元組，而普通元件的值得根據pageencoding 的格...
input file 上傳檔案
面試的時候遇到乙個問題，要求手寫的方式上傳檔案。本來覺得很簡單，但是結果怎麼也成功不了。前台 form id form1 action acceptfiles method post input type file name filename input type submit value sub ...
PHP 多input file檔案上傳
前台html jquery 後台php處理 注意name的寫法，都要使用name方式，並且用同乙個name 注意帶有file的表單，form一定要加 enctype multipart form data form form submit 接收處理檔案 filearray files imagesu...