、良生- input type=file與文件上傳

本文所說的input type=file指的是type類型是file的input元素，最簡HTML代碼如下：

<input type=file>

但是，為了習慣，我們多寫成：

<input type="file">

在HTML5出現之前(XHTML)，我們的閉合規則則有些出入：

<input type="file" />

顧名思義，選擇文件，并上傳文件。

在萬惡的舊時代，HTML5還沒有出現之前，原生的file input表單元素只能讓我們一次上傳一張圖片。無法滿足一次上傳多圖的交互需求，所以，很多場景，就被swfupload.js給取代了，有點逐漸淡出人們視野的感覺。

然，技術發展，日新月異，三十年河東，三十年河西。隨著原生HTML5表單對多圖(multiple屬性)、上傳前預覽，二進制上傳等支持越來越廣泛，原生的file input表單元素又迎來了新的升級，flash為背景的swfupload.js注定要落寞。

但是，對于PC項目，IE8-IE9瀏覽器還是不能忽略的。所以，現在，很流行的一種處理方式，就是HTML5 file上傳和flash swfupload上傳一起整合的模式，優先使用原生HTML5上傳，不支持的，使用flash上傳。我之前有篇關于HTML5上傳的文章，每天訪問量很高的：“基于HTML5的可預覽多圖片Ajax上傳”，大家有興趣可以看看。

如果想使用瀏覽器原生特性實現文件上傳(如圖片)效果，父級的form元素有個東西不能丟，就是：

enctype="multipart/form-data"

enctype屬性規定在發送到服務器之前應該如何對表單數據進行編碼，默認的編碼是：”application/x-www-form-urlencoded“。對于普通數據是挺適用的，但是，對于文件，科科，就不能亂編碼了，該什么就是什么，只能使用multipart/form-data作為enctype屬性值。

無論是舊時代的單圖上傳，還是HTML5中的多圖上傳，均是如此。

文件，尤其圖片，上場前能夠預覽，是很棒的交互體驗。不走服務器，不耗費流量，多棒！

理想雖好，實現起來……

在HTML5還沒出現的舊時代，只有低版本的IE瀏覽器貌似有方法，使用私有的濾鏡，超越安全的限制（其實是利用了不好的東西），實現圖片直接預覽；但是呢，那個時候，Chrome, FireFox沒有這一出，于是，想要使用原生file input實現圖片的上傳前預覽，兼容性坎很難跨過去。

但是，后來，HTML5來了，我們出現了轉機，IE10+以及其他現代瀏覽器，可以讓我們直接讀取圖片的數據，然后在頁面上呈現，實現了上傳前預覽；加上之前老IE的濾鏡策略，貌似，可行。但是呢但是，老的IE瀏覽器只能最多一次選擇一個文件，因此，只有單圖上傳的時候，大家可以考慮考慮。

傳統的form提交，是要改變頁面流的，也就是刷新后跳轉。好的體驗應該是走Ajax交互的。HTML5里面支持二進制formData數據提交，因此，可以從容Ajax提交上傳的文件數據；那老舊的IE瀏覽器怎么辦？

一般方法如下：

<form action="" method="post" enctype="multipart/form-data" target="uploadIframe">< <iframe id="uploadIframe"></iframe>

var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;

OK, 當然，你也可以不用像上面這么麻煩，直接使用jquery.form.js. 原理呢，就是上面這樣，但是，不需要這么麻煩。

原生的file input不收待見的另外一個原因是：長的丑還不好控制。

舉個例子，下圖這個“選擇文件”這幾個文字，我們就不好對file控件動刀子實現自定義：

file input框

怎么辦呢？

有一種方法是這樣的： 讓file類型的元素透明度0，覆蓋在我們好看的按鈕上。然后我們去點擊好看的按鈕，實際上點擊是是file元素。

然而，此方法有一些不足：

更好的方法是，使用label元素與file控件關聯，好處在于：

<label class="ui_button ui_button_primary" for="xFile">上傳文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

效果如下（真實實時效果）：

input file類型控件有一個屬性，名為

accept

, 可能有些小伙伴不太了解。可以用來指定瀏覽器接受的文件類型，也就是的那個我們打開系統的選擇文件彈框的時候，默認界面中呈現的文件類型。例如：

accept="image/jpeg"

，則界面中只有jpg圖片，如下截圖，同時，窗體右下方是“自定義文件”按鈕：

自定義文件

實際開發的時候，很少只允許傳jpg圖片，應該都是只能傳圖片類型，此時，可以使用：

accept="image/*"

于是乎，“自定義文件”按鈕變成了語義更明確的“圖片文件”：

圖片文件

accept屬性值其實是MIME類型, 例如下面幾個可能常用的：

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"

然后，多個屬性值使用逗號分隔，例如：

<input accept="audio/*,video/*,image/*">

現代瀏覽器直接value = "", 有些IE瀏覽器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己沒測試。

不過我覺得比較麻煩，還要判斷瀏覽器什么的。像本文的Ajax單圖上傳，直接form.reset()就可以了。

以上~

本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。

html開發中，表單是頁面上重要的內容，用戶輸入內容大部分內容都是通過表單收集的，在html4中表單元素是相對繁瑣的，在html5中，吸納了web forms2.0標準，大大加強了針對表單元素的功能。下面為大家介紹html5中新增的表單元素。

form元素

在html4中表單內的從屬元素必須寫在表單內部，在html5中沒有這個限制，可以寫在頁面任何地方，然后給該元素一個from屬性，屬性值為該表單的id，這樣就可以聲明該元素從屬于指定的表單了。示例代碼：<form id="test"><input type="text"></form><textarea form="test"></textarea>textarea屬性被寫在form表單之外，但它從屬于form表單，所以將form表單id指定給textarea元素的form屬性。這樣的好處在于我們可以方便添加元素的樣式，因為它們不是分散在各表單之內。不過現在只是部分瀏覽器支持這一屬性。

formaction屬性

在html4中，一個表單所有的元素只能通過表單的action屬性統一提交另一頁面，而在HTML5中可以給所有的提交按鈕（<input type="submit">、<input type="image">、<button type="submit">），都增加了不同的formaction屬性，點擊不同的按鈕提交給不同的頁面。

placeholder屬性

placeholder是指當文本框（<input type="text">或<textarea>）處于未輸入狀態時文本框顯示的輸入提示。只要加上了placeholder屬性，在指定提示文字就可以了。

autofocus屬性

給文本框、選擇框或按鈕加上該屬性，當畫面打開時，控件自動獲得焦點。在html4中做到這個效果需要使用JavaScript如“control.focus()”。不建議隨意使用該屬性，比如搜索頁面中的搜索文本框。

list屬性

在html5中，為單行文本框增加了一個list屬性，該屬性的值為某個datelist元素的id。datelist也是html5新增的元素，該元素類似選擇框（select）。但是當用戶想要設定的值不在選擇列表時，允許自行輸入。該元素本身并不顯示，而是文本框獲得焦點時提示輸入的方式顯示。為了避免在沒有支持元素的瀏覽器顯示錯誤，可以用css將它設置為不顯示。

autocomplete屬性

輔助輸入所有的自動完成功能，節省輸入時間，同時也十分方便。可以指定“on”、“off”、“不指定”這三種值，不指定時，取決各個瀏覽器。屬性為on時，可以顯示指定候補輸入的數據列表，off反之。

如果有漏掉其他方法，歡迎大家補充。每天學習一個知識點，每日寄語“失敗只有一種，那就是半途而廢。”