關於前端上傳文件全面基礎掃盲貼(零)

系列文章

關於前端上傳文件全面基礎掃盲貼(零)
關於前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關於前端上傳文件全面基礎掃盲貼(二) ----- File
關於前端上傳文件全面基礎掃盲貼(三) ----- FormData
關於前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關於前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
關於前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

前言

爲何分章節寫呢？由於覆蓋的知識點比較多，也可能我力盡詳細介紹，照顧下基礎很差的人，溫故而知新。
剛開始的確是打算一篇搞定的，寫道一半發覺已經至關長篇大論了，好多人例如我一進來看到這麼多內容就已經怕了，並且不是每一個人都須要瞭解所有內容，因而就打算分開來，讓讀者按需瞭解吧。
至於爲何會有零這一章節呢？由於實在太基礎了，大多數人均可以無視，僅供少部分新手跟記性很差的人，若是你以爲你能夠就跳過吧。

下面開始說正事上傳對我來講一直是個挺恐怖的東西,接觸的也比較少,由於之前沒有標準,爲了實現一個上傳得寫各類噁心兼容代碼,而插件每每容易有些bug也沒能力修改,時至今日,真正的勇士始終得直面鮮血淋漓的現實,因此我就特地開個掃盲貼,研究總結一下關於上傳得小知識,下面帶你們瀏覽一下我須要使用到的一些API.

零, 基礎(知識點主要來源於w3school)(已經熟悉的人直接跳過這一章節吧)

<form  action=""  method="" ></form>

標籤用於爲用戶輸入建立 HTML 表單。表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向服務器傳輸數據。

字段	描述
name	規定表單的名稱
action	規定當提交表單時向何處發送表單數據
enctype	(on/off)規定在發送表單數據以前如何對其進行編碼
method	(get/post)規定用於發送 form-data 的 HTTP 方法
novalidate	若是使用該屬性，則提交表單時不進行驗證。(Html5屬性)
onsubmit	Form 對象的 onsubmit 屬性指定了一個事件句柄函數。當用戶單擊了表單中的 Submit 按鈕而提交一個表單時，就會調用這個事件句柄函數。注意，當調用方法Form.submit() 時，該處理器函數不會被調用。若是 onsubmit 句柄返回 fasle，表單的元素就不會提交。若是該函數返回其餘值或什麼都沒有返回，則表單會被提交

詳情查閱請狠狠地點擊關於form

label

<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<label for="girl">Girl</label>
<input type="radio" name="sex" id="girl" />

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。 標籤的 for 屬性應當與相關元素的 id 屬性相同。

字段	描述
for	規定 label 綁定到哪一個表單元素
form	規定 label 字段所屬的一個或多個表單

詳情查閱請狠狠地點擊關於label

input

<input type="text" name="fname"/>
<input type="password" name="password">

<input type="checkbox" name="Bike">
<input type="checkbox" name="Car">

<input type="radio" checked="checked" name="Sex" value="male"/>
<input type="radio" name="Sex" value="female"/>

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<textarea rows="10" cols="30">

標籤用於蒐集用戶信息。根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、碼後的文本控件、單選按鈕、按鈕等等。
詳情查閱請狠狠地點擊關於input

---

<input type="submit" value="Submit">

Submit 對象表明 HTML 表單中的一個提交按鈕,在表單提交以前，觸發 onclick 事件句柄，而且一個句柄能夠經過返回 fasle 來取消表單提交。
submit: 把表單數據提交到 Web 服務器。該方法提交表單的方式與用戶單擊 Submit 按鈕同樣，可是表單的 onsubmit 事件句柄不會被調用。
詳情查閱請狠狠地點擊關於submit

---

<button type="button">Click Me!</button>

在 button 元素內部，您能夠放置內容，好比文本或圖像。這是該元素與使用 input 元素建立的按鈕之間的不一樣之處。
<button> 控件 與 <input type="button"> 相比，提供了更爲強大的功能和更豐富的內容。標籤之間的全部內容都是按鈕的內容，其中包括任何可接受的正文內容，好比文本或多媒體內容。例如，咱們能夠在按鈕中包括一個圖像和相關的文本，用它們在按鈕中建立一個吸引人的標記圖像。
惟一禁止使用的元素是圖像映射，由於它對鼠標和鍵盤敏感的動做會干擾表單按鈕的行爲。
請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其餘瀏覽器中（包括 W3C 規範）的默認值是 "submit".
(重要事項：若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來建立按鈕。)

字段	描述
name	規定按鈕的名稱
disabled	規定應該禁用該按鈕

詳情查閱請狠狠地點擊關於button