【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

导航

【初探HTML5之使用新标签布局】用html5布局我的博客页!

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息


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

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

我是一个小实验
用最新浏览器运行试试呢!

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

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');
}

此处具体应用:



简单图片上传
此处暂时告一段落,若是想看更复杂一点的应用,请猛击,记得顶哟:
http://www.cnblogs.com/yexiaochai/archive/2013/04/11/3014404.html

拖放API

其实之前,我还用jquery写了个拖放的插件呢。。

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

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

html5中默认对图片、链接可以拖放,其它元素需要设置draggable="true"才能拖放,事不宜迟,老夫马上去试试。

拖放的例子


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

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

API:

dragstart 被拖放元素 开始拖放时

drag 被拖放元素 拖放过程中

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

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

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

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

dragend 拖放的对象 拖放结束

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

结语

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


本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3025240.html,如需转载请自行联系原作者


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/285062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

两时间差

/** * Comments:返回时间差 * param 两个字符串类型的时间差(time1-time2),type(D天,H时,M分,S秒,Z-S天时分秒) * return */ public final static SimpleDateFormat SF_SIZE19 new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//初始化时间格式 public static String …

【ArcGIS微课1000例】0013:ArcGIS创建色带图例(以GlobeLand30土地覆盖数据为例)

本文以GlobeLand30土地覆盖数据(2010年)为例,讲解在ArcGIS中创建色带图例的方法。 案例数据: 色带图例: 创建过程: 选择2010年数据,点击添加到右侧的图例项。 在图例向导里面,删除图例标题,点击下一步。

使用.NET IoT驱动超声波测距传感器

背景最近买的一堆传感器到货了,先来把玩一下超声波测距传感器。超声波传感器一般用于机器人,小车的避障,物体的测距,液位检测,停车检测等领域。HC-SR04知识回顾开始之前我们先复习一下高中的物理知识。原理通过上图的原…

2019-nCoV 全国新型肺炎疫情每日动态趋势可视图

传染源: 野生动物,可能为中华菊头蝠 病毒: 新型冠状病毒 2019-nCoV 传播途径: 经呼吸道飞沫传播,亦可通过接触传播 易感人群: 人群普遍易感。老年人及有基础疾病者感染后病情较重,儿童及婴幼儿也有发病 潜伏期: 一般为 3~7 天,最长…

C语言试题173之实现插入排序算法

📃个人主页:个人主页 🔥系列专栏:C语言试题200例 💬推荐一款刷算法、笔试、面经、拿大公司offer神器👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 题目:实现排序…

【ArcGIS遇上Python】ArcGIS Python将多个文件夹内的分幅数据整合到同一个文件夹内——以Globeland30数据为例

文章目录 WinRAR解压缩ArcGIS Python批处理从Glabeland30官网下载的全球地覆盖数据包括3年(2000、2010、2020),每一年都是按图幅存储的tif格式栅格数据。以2000的数据为例,全球共812个图幅,每一个图幅对应一个压缩包,如下图所示。 WinRAR解压缩 在进行数据预处理时,必须…

Delphi中字符串比较大小 VS Oracle-SQL中字符串比较大小

重点注意Delphi和Oracle-SQL中比较字符串时空字符串的根本性的不同Delphi中的字符串比较 Delphi中字符串比较大小的规则:对应位置的字符按照字符编码值逐个对比,直到遇到可以确定大小关系的就结束比较参考《Delphi的Ord函数和ASCII码对照表》 常见的一些…

STM8S和STM8L调试串口中断的注意点

源:STM8S和STM8L调试串口中断的注意点

C语言试题174之实现快速排序算法

📃个人主页:个人主页 🔥系列专栏:C语言试题200例 💬推荐一款刷算法、笔试、面经、拿大公司offer神器👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 题目:实现快速…

解决slideDown()、slideUp()执行结束后才执行下一次,导致鼠标离开后很久动画依然在执行的问题...

问题描述: 给一个容器设置了mouseenter时,一个隐藏的box通过slideDown()显示出来;mouseleave时,通过slideUp()隐藏。 当鼠标不断在容器上滑过时,会导致鼠标离开很久后,动画也在不断执行 解决方法&#xff…

Docker Compose 安装 Superset

前言动手学 dockerSuperset 是一个强大的在线 SQL 查询编辑工具,同时也是一个轻量级的 BI 工具,今天我们就来动手学一下用 docker compose 安装 Superset。安装动手学 docker安装 git 并克隆项目:yum install git -ygit clone https://github…

[转]再见 NoSQL!

为解决大规模数据集合多重数据种类带来的挑战,NoSQL 应运而生,但现在却也遇到了诸多问题,本文作者 Rick Negrin,曾在微软工作 12 年,并在 SQL Server 团队度过大部分光阴,他提出,是时候「和 NoS…

【ArcGIS Pro微课1000例】0008:ArcGIS Pro加载不同来源的在线底图数据

ArcGIS Pro可以很方便的选择不同来源的在线底图数据,如中国地图彩色版、各种形式的天地图等。 打开ArcGIS Pro,点击左下角的【设置】。 点击【选项】。 ArcGIS Pro提供了三种形式的底图:组织的默认底图、自定义底图<

ORA-16198: LGWR received timedout error from KSR

ORA-16198: LGWR received timedout error from KSRORA-16198 意味着主库上的LOG_ARCHIVE_DEST_2的NET_TIMEOUT设置的太小&#xff0c;导致LNS不能在设置的时间内将日志传输到备库。解决方法是提高NET_TIMEOUT的值到15-20 秒&#xff0c;SQL>ALTER SYSTEM SET LOG_ARCHIVE_D…

php+mysql实现数据分批插入

上周需要将云端的数据有条件的录入到mysql中&#xff0c;最开始是使用遍历数据然后一条条的插入的笨方法&#xff0c;结果速度慢的要死&#xff0c;所以又随便写了个笨方法2.0&#xff0c;记录一下自己菜鸟的成长历程。同时这也是在博客园的第一篇文章&#xff0c;目的仅仅是单…

RIL接听电话没有声音的问题 [ RIL_Answer | RIL_SetAudioDevices ]

没有什么好说明的&#xff0c;直接上代码&#xff1a; RIL_Answer(m_hRil); RILAUDIODEVICEINFO audioDeviceInfo; audioDeviceInfo.cbSize sizeof(audioDeviceInfo); audioDeviceInfo.dwParams RIL_PARAM_ADI_ALL; audioDeviceInfo.dwRxDevic…

[转]敏捷开发之Scrum扫盲,及敏捷开发中XP与SCRUM的区别

敏捷开发之Scrum扫盲篇 现在敏捷开发是越来越火了&#xff0c;人人都在谈敏捷&#xff0c;人人都在学习Scrum和XP… 为了不落后他人&#xff0c;于是我也开始学习Scrum&#xff0c;今天主要是对我最近阅读的相关资料&#xff0c;根据自己的理解&#xff0c;用自己的话来讲述S…

C语言试题175之实现选择排序算法

📃个人主页:个人主页 🔥系列专栏:C语言试题200例 💬推荐一款刷算法、笔试、面经、拿大公司offer神器👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 题目:实现选择…

最流行的 .NET 反编译工具合集

编译和反编译 .NET 中的编译是把开发人员写的 C# 代码转化为计算机可理解的代码的过程&#xff0c;也就是中间语言代码&#xff08;IL代码&#xff09;。在这个过程中&#xff0c;C# 源代码被转换为可执行文件&#xff08;exe或者dll 文件&#xff09;。反编译则和编译相反&am…

【ArcGIS Pro微课1000例】0009:ArcGIS Pro地理配准完整教程(建议收藏)

扫描得到的地图数据通常不包含空间参考信息,航片和卫片的位置精度也往往较低,这就需要通过具有较高位置精度的控制点将这些数据匹配到用户指定的地理坐标系中,这个过程称为地理配准。 地理配准即就是通过建立数学函数将栅格数据集(扫描后的图像)中各点的位置与标准空间参…