首页 > 网页制作 > html5

HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法

admin html5 2022-02-06 03:14:13 表单验证   增加文件上传   集成拖放"

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

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

……

 以上元素属于可有可无的元素,不必赘述,接下来,本文明星对象登场:

文件API

 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













我们在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 读取完成后触发,无论成功失败;

光说不练不行,我们这里做个小实验:

复制代码代码如下:
我是一个小实验





%20%20%20%20%20%20%20%20%20%20%20%20

%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20readAsDataURL%20%20%20%20%20%20%20%20%20readAsBinaryString%20%20%20%20%20%20%20%20%20readAsText%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20读取文件%20%20%20%20

用最新浏览器运行试试呢!

我们再做一个判断,看看其事件执行顺序:

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

此处具体应用:


复制代码代码如下:
简单图片上传






%20%20%20%20%20%20%20

%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20上传图片%20%20%20%20%20%20%20%20拖放API其实之前,我还用jquery写了个拖放的插件呢。。

工作中碰到的一些东西【弹出窗口】【拖放】【异步文件上传】

但是集成在HTML5中当然更好!!!我们现在来看看这个东东。。。并且它的强大之处,就是不止在浏览器中拖动,这就不得了了哦(拖动图片上传)

html5中默认对图片、链接可以拖放,其它元素需要设置draggable="true"才能拖放,事不宜迟,老夫马上去试试。
复制代码代码如下:拖放的例子%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20请拖放

%20
%20%20%20%20%20%20document.ondragover%20=%20function%20(e)%20{%20%20%20%20%20%20%20%20%20e.preventDefault();%20%20%20%20%20};%20%20%20%20%20document.ondrop%20=%20function%20(e)%20{%20%20%20%20%20%20%20%20%20e.preventDefault();%20%20%20%20%20};%20%20%20%20%20%20var%20source%20=%20document.getElementById('dragme');%20%20%20%20%20var%20dest%20=%20document.getElementById('text');%20%20%20%20%20source.addEventListener('dragstart',%20function%20(e)%20{%20%20%20%20%20%20%20%20%20var%20dt%20=%20e.dataTransfer;%20%20%20%20%20%20%20%20%20dt.setData('text/plain',%20'您好'%20+%20new%20Date());%20%20%20%20%20},%20false);%20%20%20%20%20%20dest.addEventListener('dragend',%20function%20(e)%20{%20%20%20%20%20%20%20%20%20e.preventDefault();%20%20%20%20%20},%20false);%20%20%20%20%20%20dest.addEventListener('drop',%20function%20(e)%20{%20%20%20%20%20%20%20%20%20var%20dt%20=%20e.dataTransfer;%20%20%20%20%20%20%20%20%20var%20text%20=%20dt.getData('text/plain');%20%20%20%20%20%20%20%20%20dest.innerHTML%20+=%20text;%20%20%20%20%20%20%20%20%20e.stopPropagation();%20%20%20%20%20%20%20%20%20e.preventDefault();%20%20%20%20%20%20%20%20%20return%20false;%20%20%20%20%20},%20false);%20%20%20%20%20%20%20%20%20%20%20%20

拖放时候一定要记住,阻止页面默认行为,否则会打开新窗口的,其中以下亦是重点:

1 拖放可使用DataTransfer传递数据,该对象是非常有用的,因为在拖动目标元素时,可能会经过其它元素,我们可以用此传递信息;

API:

dragstart 被拖放元素 开始拖放时

drag 被拖放元素 拖放过程中

dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素时

dragover  拖放过程中鼠标经过的元素 本元素内移动

drageleave  拖放过程中鼠标经过的元素 离开本元素

drop 拖放的目标元素 拖动的元素放到了本元素中

dragend 拖放的对象 拖放结束

其实这里是有问题的,我并未去深入研究从开始拖动到经过各种元素会产生神马情况,这个可以作为二次学习时的重点研究对象。

结语

html5的文件和表单做的比较精致,个人感觉比布局新增的几个标签有用多了,明天开始学习canvas,虽然不懂,虽然见过,但是还是感觉很厉害的样子! 

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/75854.html

上一篇 : HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
下一篇 : 用HTML5实现网站在windows8中贴靠的方法
留言与评论(共有 0 条评论)
   
验证码:

热门文章

最近发表

标签列表

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持