首頁 >web前端 >H5教程 >HTML5 form標籤之解放表單驗證、增加檔案上傳、整合拖放的使用方法_html5教學技巧

HTML5 form標籤之解放表單驗證、增加檔案上傳、整合拖放的使用方法_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:49:291727瀏覽

HTML中與form有關的東東

新增屬性

個人理解

form

html5之前,表單內的從屬元素需要放入標籤中,現在可以為標籤指定form標籤即可

點評:該功能解決了我們實際中遇到的一些問題,例如iframe模擬非同步圖片上傳時,就必須將圖片寫到form外。

formaction

formmethod

此屬性用於按鈕(submit)讓表單提交頁面可再按鈕控制

formmethod指定各按鈕提交方式

placehoder

該屬性非常有用,用於文字方塊中顯示提示訊息,非常有用的一屬性

list

list屬性需要與datalist一同使用,相當於文字框,模擬select,非常適用的一個屬性

autofocus

用於文本框主動獲取焦點,有用的東東

新增input屬性,解放驗證,各瀏覽器支援不好

tel

用於電話

url

驗證url

email

驗證信箱

date/time

日期類別驗證,會出現日期選擇插件哦。 。 。

number

只能是數字

range

控制數字範圍

color

顏色選擇器,好東西啊。 。 。

HTML5中增加了許多與form有關的屬性,說實在的,這些東西真心貼心啊! ! !很大程度講:

完全解放表單驗證

若不是考慮相容性問題,老夫恨不得立即投入其中,但一旦想起相容性問題的話,你就會非常頭痛! ! !

因為原本很好的東西,卻是因為歷史的原因,反而會增加我們的工作量! ! !

在錯的時間,做對的事情,他看起來是對的,實際上也是對的。 。 。但你會發現,他錯了。 。 。 。

增強頁元素

项目

个人理解

figure/figcaption

据说表示页面独立内容,移除后无影响,暂无发现用处..

details

该标签有点意思,用于替代js中,元素收起展开功能。

最新ff都不支持……个人觉得,既然提供了该标签应该提供属性表示上下展开或者左右展开;

mark

高亮显示,当真语义化

progress

屌丝们,可以告别gif图片了,也不用div模拟百分比了,与windows区域一致的进度条出现啦,异步文件上传更加完善!

改良ol

老夫就没有用过这个主。。。

……

項目 個人理解 figure/figcaption 據說表示頁面獨立內容,移除後無影響,暫無發現用處.. details 這個標籤有點意思,用於取代js中,元素收起展開功能。 最新ff都不支援…個人覺得,既然提供了該標籤應該提供屬性表示上下展開或左右展開; mark 高亮顯示,當真語意化 progress 屌絲們,可以告別gif圖片了,也不用div模擬百分比了,與windows區域一致的進度條出現啦,非同步檔案上傳更加完善! 改良ol 老夫就沒有用過這個主。 。 。 ……

 以上元素屬於可有可無的元素,不必贅述,接下來,本文明星對象登場:

檔案API

 FileList與file物件:

在html4中,file標籤只允許選擇一個文件,但html5中,設定multiple屬性後,變可以選擇多文件了! ! !

而,選擇後便會形成這裡的filelist對象,也就是一個file組成的對象列表,簡單來說就是file數組。

file物件具有2屬性,name代表檔案名稱(不包括路徑),lastModifiedDate表示最後修改時間

其實我們在html4操作file時,可以取得本地很多屬性,例如檔案大小,但是萬惡的ie不支持,到ie9後才有所好轉。

所以想客戶端提示檔案上傳過大的同學放棄吧。 。 。

 

Blob物件

表示二進位原始數據,提供一slice方法存取位元組內部原始資料;size表示blob物件位元組長度、type表示其mime類型,類型未知則傳回空字串。

來來,簡單做一實驗:

複製代碼
代碼如下:

關於File













我們在ff中選擇圖片後,提交,設個斷點看看:

file主角登場,就是他了,我們將之屬性輸出來看看:

真的是應有盡有!有了該屬性就可以做很多事情了,但是。 。 。我們來看看ie7、8:

各位觀眾,人家壓根沒這個屬性,所以一切百搭。 。 。

話說,我覺得ie瀏覽器調試起來很痛苦,請問各位大神有沒有什麼好的ie開發插件,就像ff的firebug,google自帶的插件? ?

 

FIleReader介面

filereader接口,可將文件讀入內存,有了這個東東我們就可以很舒服的做圖片預覽了,但他的公用不止如此。

filereader的四個方法:

readAsBinaryString 將檔案讀取為二進位碼-通常我們會將資料傳給後端;

readAsText 將檔案讀取為文字-讀取文字內容;

readAsURL 將文件讀取為DataURL-一般是小文件,圖片或html;

abort 中斷讀取,因為檔案過大等待時間就很長了

 

filereader介面事件:

onabort 讀取中斷觸發;

onerror 讀取失敗觸發;

onloadstart 開始讀取時觸發;

onprogress 讀取中

onload 讀取成功時觸發;

onloadend 讀取完成後觸發,無論成功失敗;

光說不練不行,我們這裡做個小實驗:

複製程式碼
程式碼如下:

我是一個小實驗

















用最新瀏覽器運行試試呢!

我們再做一個判斷,看看其事件執行順序:

       reader.onload = function (e) {
                   }
                reader.onprogress = function (e) {
      >                }
                  alert('onerror');
                }
                     alert('onloadstart');
                }
                     alert('onloaded');
                }


此處具體應用:


複製程式碼

程式碼如下:

简单图片上传