HTML5 form標(biāo)簽之解放表單驗(yàn)證、增加文件上傳、集

2020-03-24 18:25:07

字體：大中小

供稿：網(wǎng)友

HTML HTML5 form標(biāo)簽之解放表單驗(yàn)證、增加文件上傳、集成拖放的使用方法
html5之前，表單內(nèi)的從屬元素需要放入標(biāo)簽中，現(xiàn)在可以為標(biāo)簽指定form標(biāo)簽即可點(diǎn)評(píng)：該功能解決了我們實(shí)際中遇到的一些問(wèn)題，比如iframe模擬異步圖片上傳時(shí)，就必須將圖片寫(xiě)到form外。
該屬性用于按鈕（submit）讓表單提交頁(yè)面可又按鈕控制 formmethod指定各按鈕提交方式
HTML5中增加了很多與form有關(guān)的屬性，說(shuō)實(shí)在的，這些東西真心貼心?。。?！很大程度上講：完全解放表單驗(yàn)證若不是考慮兼容性問(wèn)題，老夫恨不得立即投入其中，但一旦想起兼容性問(wèn)題的話，你就會(huì)非常頭疼?。。∫?yàn)樵竞芎玫臇|西，卻是因?yàn)闅v史的原因，反而會(huì)增加我們的工作量?。。≡阱e(cuò)的時(shí)間，做對(duì)的事情，他看起來(lái)是對(duì)的，實(shí)際上也是對(duì)的。。。但你會(huì)發(fā)現(xiàn)，他錯(cuò)了。。。。增強(qiáng)頁(yè)面元素
該標(biāo)簽有點(diǎn)意思，用于替代js中，元素收起展開(kāi)功能。最新ff都不支持個(gè)人覺(jué)得，既然提供了該標(biāo)簽應(yīng)該提供屬性表示上下展開(kāi)或者左右展開(kāi)；
屌絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區(qū)域一致的進(jìn)度條出現(xiàn)啦，異步文件上傳更加完善！
FileList與file對(duì)象：在html4中，file標(biāo)簽只允許選擇一個(gè)文件，但html5中，對(duì)file標(biāo)簽設(shè)置multiple屬性后，變可以選擇多文件了?。。《?，選擇后便會(huì)形成這里的filelist對(duì)象，即一個(gè)個(gè)file組成的對(duì)象列表，簡(jiǎn)單來(lái)說(shuō)就是file數(shù)組。file對(duì)象具有2屬性，name代表文件名（不包括路徑），lastModifiedDate表示最后修改時(shí)間其實(shí)我們?cè)趆tml4中操作file時(shí)，可以獲取本地很多屬性，比如文件大小，但是萬(wàn)惡的ie不支持，到ie9后才有所好轉(zhuǎn)。所以想客戶端提示文件上傳過(guò)大的同學(xué)放棄吧。。。Blob對(duì)象表示二進(jìn)制原始數(shù)據(jù)，提供一slice方法訪問(wèn)字節(jié)內(nèi)部原始數(shù)據(jù)；size表示blob對(duì)象字節(jié)長(zhǎng)度、type表示其mime類(lèi)型，類(lèi)型未知?jiǎng)t返回空字符串。來(lái)來(lái)，簡(jiǎn)單做一實(shí)驗(yàn)：

復(fù)制代碼代碼如下:
關(guān)于File
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title /title
script src="../jquery-1.7.1.js" type="text/javascript" /script
script type="text/javascript"
$(document).ready(function () {
$('#wl').click(function () {
var f = $('#file')[0];

var s = '';

});
});
/script
/head
body
input type="file" id="file" multiple /
button id="wl"
文件上傳 /button
/body
/html

我們?cè)趂f中選擇圖片后，提交，設(shè)個(gè)斷點(diǎn)看看：file主角登場(chǎng)，就是他了，我們將之屬性輸出來(lái)看看：真的是應(yīng)有盡有?。∮辛嗽搶傩跃涂梢宰龊芏嗍虑榱?，但是。。。我們來(lái)看看ie7、8：各位觀眾，人家壓根沒(méi)這個(gè)屬性，所以一切百搭。。。話說(shuō)，我覺(jué)得ie瀏覽器調(diào)試起來(lái)很痛苦，請(qǐng)問(wèn)各位大神有沒(méi)有什么好的ie開(kāi)發(fā)插件，就像ff的firebug，google自帶的插件？？FIleReader接口 filereader接口，可將文件讀入內(nèi)存，有了這個(gè)東東我們就可以很舒服的做圖片預(yù)覽了，但他的公用不止如此。filereader的四個(gè)方法：readAsBinaryString 將文件讀取為二進(jìn)制碼通常我們將數(shù)據(jù)傳給后端；readAsText 將文件讀取為文本讀取文本內(nèi)容；readAsURL 將文件讀取為DataURL 一般是小文件，圖片或者h(yuǎn)tml；abort 中斷讀取，因?yàn)槲募^(guò)大等待時(shí)間就很長(zhǎng)了filereader接口事件：onabort 讀取中斷觸發(fā)；onerror 讀取失敗觸發(fā)；onloadstart 開(kāi)始讀取時(shí)觸發(fā)；onprogress 讀取中onload 讀取成功時(shí)觸發(fā)；onloadend 讀取完成后觸發(fā)，無(wú)論成功失敗；光說(shuō)不練不行，我們這里做個(gè)小實(shí)驗(yàn)：

復(fù)制代碼代碼如下:
我是一個(gè)小實(shí)驗(yàn)
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title /title
script src="../jquery-1.7.1.js" type="text/javascript" /script
script type="text/javascript"
$(document).ready(function () {
var bt = $('#wl');
var file = $('#file');
var type = $('#type');
var result = $('#result');

var func = {};
func.readAsDataURL = function (file) {
//驗(yàn)證是否為圖片
if (!/image///w+/.test(file.type)) {
alert('非圖片格式');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
result.html(' img src="' + this.result + '"/
}
}

func.readAsBinaryString = function (file) {

var reader = new FileReader();
reader.readAsBinaryString(file);

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：淺談利用緩存來(lái)優(yōu)化HTML5 Canvas程序的性能

下一篇：Form表單在HTML5中新的使用方法