HTML5form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法

HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

10年的和政網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整和政建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“和政網(wǎng)站設(shè)計(jì)”,“和政網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

HTML中與form有關(guān)的東東

新增屬性	個(gè)人理解
form	html5之前，表單內(nèi)的從屬元素需要放入標(biāo)簽中，現(xiàn)在可以為標(biāo)簽指定form標(biāo)簽即可點(diǎn)評(píng)：該功能解決了我們實(shí)際中遇到的一些問(wèn)題，比如iframe模擬異步圖片上傳時(shí)，就必須將圖片寫(xiě)到form外。
formaction formmethod	該屬性用于按鈕（submit）讓表單提交頁(yè)面可又按鈕控制 formmethod指定各按鈕提交方式
placehoder	該屬性非常有用，用于文本框中顯示提示信息，非常有用的一屬性
list	list屬性需要與datalist一同使用，相當(dāng)于文本框，模擬select，非常適用的一個(gè)屬性
autofocus	用于文本框主動(dòng)獲取焦點(diǎn)，有用的東東
新增input屬性，解放驗(yàn)證，各瀏覽器支持不好
tel	用于電話
url	驗(yàn)證url
email	驗(yàn)證郵箱
date/time	日期類(lèi)驗(yàn)證，會(huì)出現(xiàn)日期選擇插件哦。。。
number	只能是數(shù)字
range	控制數(shù)字范圍
color	顏色選擇器，好東西啊。。。

HTML5中增加了很多與form有關(guān)的屬性，說(shuō)實(shí)在的，這些東西真心貼心啊?。?！很大程度上講：

完全解放表單驗(yàn)證

若不是考慮兼容性問(wèn)題，老夫恨不得立即投入其中，但一旦想起兼容性問(wèn)題的話，你就會(huì)非常頭疼?。?！

因?yàn)樵竞芎玫臇|西，卻是因?yàn)闅v史的原因，反而會(huì)增加我們的工作量?。?！

在錯(cuò)的時(shí)間，做對(duì)的事情，他看起來(lái)是對(duì)的，實(shí)際上也是對(duì)的。。。但你會(huì)發(fā)現(xiàn)，他錯(cuò)了。。。。

增強(qiáng)頁(yè)面元素

項(xiàng)目	個(gè)人理解
figure/figcaption	據(jù)說(shuō)表示頁(yè)面獨(dú)立內(nèi)容，移除后無(wú)影響，暫無(wú)發(fā)現(xiàn)用處..
details	該標(biāo)簽有點(diǎn)意思，用于替代js中，元素收起展開(kāi)功能。最新ff都不支持……個(gè)人覺(jué)得，既然提供了該標(biāo)簽應(yīng)該提供屬性表示上下展開(kāi)或者左右展開(kāi)；
mark	高亮顯示，當(dāng)真語(yǔ)義化
progress	屌絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區(qū)域一致的進(jìn)度條出現(xiàn)啦，異步文件上傳更加完善！
改良o(jì)l	老夫就沒(méi)有用過(guò)這個(gè)主。。。
……

以上元素屬于可有可無(wú)的元素，不必贅述，接下來(lái)，本文明星對(duì)象登場(chǎng)：

文件API

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)：

代碼如下:

關(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)看看：

HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法

file主角登場(chǎng)，就是他了，我們將之屬性輸出來(lái)看看：

HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法

真的是應(yīng)有盡有?。∮辛嗽搶傩跃涂梢宰龊芏嗍虑榱?，但是。。。我們來(lái)看看ie7、8：

HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法

各位觀眾，人家壓根沒(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)：

代碼如下:

我是一個(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);
reader.onload = function (e) {
result.html(this.result);
}
}

func.readAsText = function (file) {

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
result.html(this.result);
}
}

bt.click(function () {
if (func[type.val()] && typeof func[type.val()] == 'function') {
func[type.val()](file[0].files[0]);
}
});

});
</script>
</head>
<body>
<div id="result">
</div>
<input type="file" id="file" multiple />
<select id="type">
<option value="readAsDataURL">readAsDataURL</option>
<option value="readAsBinaryString">readAsBinaryString</option>
<option value="readAsText">readAsText</option>
</select>
<button id="wl">
讀取文件</button>

</body>
</html>

用最新瀏覽器運(yùn)行試試呢！

我們?cè)僮鲆粋€(gè)判斷，看看其事件執(zhí)行順序：

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

此處具體應(yīng)用：

代碼如下:

簡(jiǎ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>
<style type="text/css">
body{ font-size: 14px;}
.image_upload{ margin:10px; border: 1px solid #E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative; }
.image_upload img{ max-height: 150px; max-width: 150px; }
.image_upload .rate { position: absolute; top: 6px; left: 6px; padding: 0 5px; color: White; background: black; border-radius: 5px; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }
.image_upload .delete { background: url("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right: -6px; top: -6px; width: 16px;}

</style>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var j_bt_sub = $('#submitForm'),
j_form = $('#form'),
j_state = $('#upState'),
j_file = $('#files');
var is_support = true; //判斷是否支持高級(jí)特性，經(jīng)測(cè)試若是不支持filereader與file
if (typeof FileReader === 'undefined') is_support = false;

j_file.change(function () {
var file = j_file.get(0);
if (!file.files[0]) is_support = false;

//支持高級(jí)功能的瀏覽器
if (is_support) {
files = file.files;
for (var k = 0, len = files.length; k < len; k++) {
var file = files[k];
var reader = new FileReader();
reader.readAsDataURL(file);
(function (k) {
reader.onloadend = function (e) {
if (reader.error) {
alert(reader.error);
} else {
var up = $('<div class="image_upload" id="up_' + k + '"></div>');
var img = $('<img src="' + this.result + '" alt="" id="img_' + k + '">');
var rate = $('<div class="rate" id="rate_' + k + '">0%</div>');
var del = $('<div class="delete" title="刪除" id="del_' + k + '"></div>');
up.append(img);
up.append(rate);
up.append(del);
del.click(function () {
$(this).parent().remove();
});
j_state.append(up);
}
};
})(k);
} //for
} else {
//不支持的話采用傳統(tǒng)方式
}
});

//此處應(yīng)該支持平滑后退，后面考慮
j_bt_sub.click(function (e) {
if (is_support) {
var file = j_file.get(0);
files = file.files;
for (var k = 0, len = files.length; k < len; k++) {
var file = files[k];
upload(file, k);
}
}
});

function upload(file, k) {

var up = $('#up_' + k);
var img = $('#img_' + k);
var rate = $('#rate_' + k);
var del = $('#del_' + k);

var fd = new FormData();
fd.append('upload', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
var percentComplete = Math.round((e.loaded) * 100 / e.total);
rate.html(percentComplete.toString() + '%');
}, false);
// 文件上傳成功或是失敗
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
rate.html('100%');
var url = xhr.responseText;
img.attr('src', url);
var s = '';
}
}
};
xhr.open("POST", "fileUpload.ashx");
//發(fā)送
xhr.send(fd);
}

});
</script>
</head>
<body>
<div id="upState"></div>
<form id="uploadForm" action="fileUpload.ashx" method="post" enctype="multipart/form-data">
<input id="files" type="file" size="30" name="file[]" multiple />
<button type="button" id="submitForm">上傳圖片</button>
</form>
</body>
</html>

拖放API其實(shí)之前，我還用jquery寫(xiě)了個(gè)拖放的插件呢。。

工作中碰到的一些東西【彈出窗口】【拖放】【異步文件上傳】

但是集成在HTML5中當(dāng)然更好！?。∥覀儸F(xiàn)在來(lái)看看這個(gè)東東。。。并且它的強(qiáng)大之處，就是不止在瀏覽器中拖動(dòng)，這就不得了了哦（拖動(dòng)圖片上傳）

html5中默認(rèn)對(duì)圖片、鏈接可以拖放，其它元素需要設(shè)置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。

代碼如下:

<strong>拖放的例子
</strong> <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>
<div id="dragme" draggable="true" >請(qǐng)拖放</div>
<div id="text" ></div>
<script type="text/javascript">
document.ondragover = function (e) {
e.preventDefault();
};
document.ondrop = function (e) {
e.preventDefault();
};

var source = document.getElementById('dragme');
var dest = document.getElementById('text');
source.addEventListener('dragstart', function (e) {
var dt = e.dataTransfer;
dt.setData('text/plain', '您好' + new Date());
}, false);

dest.addEventListener('dragend', function (e) {
e.preventDefault();
}, false);

dest.addEventListener('drop', function (e) {
var dt = e.dataTransfer;
var text = dt.getData('text/plain');
dest.innerHTML += text;
e.stopPropagation();
e.preventDefault();
return false;
}, false);

</script>
</body>
</html>

HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法

拖放時(shí)候一定要記住，阻止頁(yè)面默認(rèn)行為，否則會(huì)打開(kāi)新窗口的，其中以下亦是重點(diǎn)：

1 拖放可使用DataTransfer傳遞數(shù)據(jù)，該對(duì)象是非常有用的，因?yàn)樵谕蟿?dòng)目標(biāo)元素時(shí)，可能會(huì)經(jīng)過(guò)其它元素，我們可以用此傳遞信息；

API：

dragstart 被拖放元素開(kāi)始拖放時(shí)

drag 被拖放元素拖放過(guò)程中

dragenter 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素被拖放元素開(kāi)始進(jìn)入本元素時(shí)

dragover 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素本元素內(nèi)移動(dòng)

drageleave 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素離開(kāi)本元素

drop 拖放的目標(biāo)元素拖動(dòng)的元素放到了本元素中

dragend 拖放的對(duì)象拖放結(jié)束

其實(shí)這里是有問(wèn)題的，我并未去深入研究從開(kāi)始拖動(dòng)到經(jīng)過(guò)各種元素會(huì)產(chǎn)生神馬情況，這個(gè)可以作為二次學(xué)習(xí)時(shí)的重點(diǎn)研究對(duì)象。

html5的文件和表單做的比較精致，個(gè)人感覺(jué)比布局新增的幾個(gè)標(biāo)簽有用多了，明天開(kāi)始學(xué)習(xí)canvas，雖然不懂，雖然見(jiàn)過(guò)，但是還是感覺(jué)很厲害的樣子！

看完上述內(nèi)容，你們掌握HTML5 form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱(chēng)：HTML5form標(biāo)簽中解放表單驗(yàn)證和增加文件上傳以及集成拖放的使用方法
網(wǎng)站網(wǎng)址：http://bm7419.com/article4/pcodie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App設(shè)計(jì)、網(wǎng)站收錄、域名注冊(cè)、云服務(wù)器、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容