HTML5 form标签之解放表单验证、增加文件上传、集

2020-03-24 18:25:07

字体：大中小

来源：转载

供稿：网友

HTML HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
html5之前，表单内的从属元素需要放入标签中，现在可以为标签指定form标签即可点评：该功能解决了我们实际中遇到的一些问题，比如iframe模拟异步图片上传时，就必须将图片写到form外。
该属性用于按钮（submit）让表单提交页面可又按钮控制 formmethod指定各按钮提交方式
HTML5中增加了很多与form有关的属性，说实在的，这些东西真心贴心啊！！！很大程度上讲：完全解放表单验证若不是考虑兼容性问题，老夫恨不得立即投入其中，但一旦想起兼容性问题的话，你就会非常头疼！！！因为原本很好的东西，却是因为历史的原因，反而会增加我们的工作量！！！在错的时间，做对的事情，他看起来是对的，实际上也是对的。。。但你会发现，他错了。。。。增强页面元素
该标签有点意思，用于替代js中，元素收起展开功能。最新ff都不支持个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
FileList与file对象：在html4中，file标签只允许选择一个文件，但html5中，对file标签设置multiple属性后，变可以选择多文件了！！！而，选择后便会形成这里的filelist对象，即一个个file组成的对象列表，简单来说就是file数组。file对象具有2属性，name代表文件名（不包括路径），lastModifiedDate表示最后修改时间其实我们在html4中操作file时，可以获取本地很多属性，比如文件大小，但是万恶的ie不支持，到ie9后才有所好转。所以想客户端提示文件上传过大的同学放弃吧。。。Blob对象表示二进制原始数据，提供一slice方法访问字节内部原始数据；size表示blob对象字节长度、type表示其mime类型，类型未知则返回空字符串。来来，简单做一实验：

复制代码代码如下:
关于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

我们在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 读取完成后触发，无论成功失败；光说不练不行，我们这里做个小实验：

复制代码代码如下:
我是一个小实验
!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) {
//验证是否为图片
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);

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：浅谈利用缓存来优化HTML5 Canvas程序的性能

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