整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、良生- 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()就可以了。
以上~
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證，今天將為大家帶來HTML中的表單及其input輸入類型。
一、HTML表單
1、HTML表單用于收集不同類型的用戶輸入，是一個包含表單元素的區域并且允許用戶在表單中輸入內容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復選框（checkboxes）等。
2、表單使用標簽<form>來設置，示例：
運行結果：
二、HTML表單屬性：
1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。
2、action屬性
在上面的示例中出現了action屬性，action屬性定義在提交表單執行的動作，向服務器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到web服務器上的網頁，上面的例子中，則指定了某個服務器腳本來處理被提交表單。
如果省略 action 屬性，則 action 會被設置為當前頁面。
3、method 屬性
method屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：
如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息，使用get。
如果表單正在更新數據，或者包含敏感信息（例如密碼），使用post。
4、如果要正確地被提交，每個輸入字段必須設置一個 name 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="Firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>
<p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p>
</body>
</html>
運行結果：
5、target 屬性
target 屬性規定提交表單后在何處顯示響應，target 屬性可設置以下值之一：
默認值為 _self，這意味著響應將在當前窗口中打開。
6、Autocomplete 屬性
autocomplete 屬性規定表單是否應打開自動完成功能。
啟用自動完成功能后，瀏覽器會根據用戶之前輸入的值自動填寫值，示例：
運行結果：
7、所有<form>屬性的列表：
三、HTML表單元素：
1、<input>元素是最重要的表單元素，有很多的形態，根據不同的type屬性，例如：
① 文本輸入（text），示例：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>請注意表單本身是不可見的。</p>
<p>同時請注意文本字段的默認寬度是 20 個字符。</p>
</body>
</html>
運行結果：
② 單選按鈕輸入（radio），示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
運行結果：
③ 提交按鈕（submit），示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>
</body>
</html>
運行結果：
2、<select>元素
<select>元素定義下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
運行結果：
3、<fieldset>元素
<fieldset>元素組合表單中的相關數據
<legend>元素為<fieldset>元素定義標題，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
運行結果：
4、<textarea> 元素
<textarea> 元素定義多行輸入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
運行結果：
5、HTML5<datalist>元素
<datalist> 元素為 <input> 元素規定預定義選項列表。
用戶會在他們輸入數據時看到預定義選項的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
運行結果：
四、HTML表單輸入類型
輸入類型 | 定義 |
text | 定義供文本輸入的單行輸入字段 |
password | 定義密碼字段 |
submit | 定義提交表單數據至表單處理程序的按鈕 |
radio | 定義單選按鈕 |
checkbox | 定義復選框 |
<input>中的type：
類型 | 定義 |
radio | 定義單選按鈕 |
checkbox | 定義復選框 |
button | 定義按鈕 |
number | 用于應該包含數字值的輸入字段 |
date | 用于應該包含日期的輸入字段 |
color | 用于應該包含顏色的輸入字段 |
range | 用于應該包含一定范圍內的值的輸入字段 |
month | 允許用戶選擇月份和年份 |
week | 允許用戶選擇周和年 |
time | 允許用戶選擇時間（無時區） |
datetime | 允許用戶選擇日期和時間（有時區） |
datetime-local | 允許用戶選擇日期和時間（無時區） |
用于應該包含電子郵件地址的輸入字段 | |
search | 用于搜索字段（搜索字段的表現類似常規文本字段） |
tel | 用于應該包含電話號碼的輸入字段 |
url | 用于應該包含 URL 地址的輸入字段 |
輸入限制：
這就是有關HTML表單的大概內容了，希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。
前面已經學習相關html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態的，一個網站如果要實現用戶的互動交流，這時表單就起到關鍵的作用，表單的用途很多，它主要用來收集用戶的相關信息，是網頁具有交互的功能。例如，用戶注冊登錄，留言等。
下面會詳細介紹表單的使用方法，有以下內容：
使用<form></form>標簽來創建一個表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。
語法代碼如下：
<form name="表單名稱" action="表單處理程序的服務地址" method="提交表單時所用的HTTP方法">
...... 表單控件......
</form>1、action —— 處理程序
這里的 action 屬性值表單提交的地址，就是表單收集好數據后要傳遞給遠程服務的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發送電子郵件。
使用表單發送電子郵件：
<form action="mailto:xxx@126.com">
...... 表單控件......
</form>提交到后臺程序地址：
<form action="action_page.php">
...... 表單控件......
</form>2、name —— 表單名稱
表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時發生混亂，一般要設置一個名稱，且在同一頁面中最好是唯一的，不要和其它表單重復命名。
<form name="loginForm">
...... 表單控件......
</form>3、method —— 傳送數據方法
method 屬性用來定義處理程序使用那種方法來獲取數據信息，常用的有 get 和 post （http 協議定義的方法）。
<form name="loginForm" action="get 或 post">
...... 表單控件......
</form>何時使用 GET？
GET 最適合少量數據或不是很重要數據的提交，瀏覽器會設定容量限制，默認如何沒有設置method 屬性，表單則會使用get 方法。
當您使用 GET 時，表單數據在頁面地址欄中是可見的，會在表單提交的地址后面跟一個問號“?” ，問號后面是數據，以 名稱1=值1&名稱2=值2 形式發送到后臺程序。
地址欄會看到如下：
action_page.php?firstname=Mickey&lastname=Mouse關于 GET 的注意事項：
以名稱/值對的形式將表單數據追加到 URL
永遠不要使用 GET 發送敏感數據！（提交的表單數據在 URL 中可見！）
URL 的長度受到限制（2048 個字符）
對于用戶希望將結果添加為書簽的表單提交很有用
GET 適用于非安全數據，例如 Google 中的查詢字符串
何時使用 POST？
使用post 表單數據和url（表單提交地址）是分開發送的，在頁面地址欄中被提交的數據是不可見的，這樣安全性更好，用戶端會通知服務端獲取數據，所以這種情況沒有數據長度的限制，缺點是速度會慢些。
關于 POST 的注意事項：
將表單數據附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數據）
POST 沒有大小限制，可用于發送大量數據。
帶有 POST 的表單提交后無法添加書簽
4、enctype —— 編碼方式
enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。
<form enctype="value">有以下幾種值：
值 | 含義 |
application/x-www-form-urlencoded | 在發送前編碼所有字符（默認編碼方式） |
multipart/form-data | 不對字符編碼。 在使用包含文件上傳控件的表單時，必須使用該值。 |
text/plain | 以純文本的方式，空格轉換為 "+" 加號，但不對特殊字符編碼。 |
5、target —— 目標顯示方式
target 屬性規定在何處打開 action URL。表單的目標窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯等。
<form target="value">屬性值有以下：
值 | 描述 |
_blank | 在新窗口中打開。 |
_self | 默認。在表單當前的窗口中打開。 |
_parent | 在父窗口中打開。 |
_top | 在頂級窗口中打開。 |
framename | 在指定的框架窗口中打開。 |
看到這里是不是想的了之前學習超鏈接時候，a標簽也有同樣的屬性，這里差不多一個意思，只是用途不一樣。
這里的窗口有可能是框架 frame 或 浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個頁面中可以嵌套一個子窗口。
什么是表單控件，就是收集數據的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。
如下代碼：
<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請輸入文本
</textarea>
</div>
</select>
</form>效果如下：
這里顯示了一個基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會按其使用類型介紹表單控件。
所有表單控件都一個name屬性和vaule屬性，用于和其它控件區別，后臺程序將會以此名稱獲取其表單控件對應的vaule值。
下篇會介紹各種表單控件的使用，感謝關注。
上篇：前端入門——html 表格的使用
下篇：前端入門——html 表單控件使用
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
