导航
【初探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，如需转载请自行联系原作者

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

  1. Web后端学习笔记 Flask（8） WTForms 表单验证，文件上传

    Flask-WTF是简化了WTForms操作的一个第三方库.WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板.同时还包含一些其他的功能.例如CSRF保护,文件上传等功能,安装fl ...

  2. ajax post form上传图片,ajax怎样提交form表单与实现文件上传

    这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...

  3. WebApi发送HTML表单数据：文件上传与多部分MIME

    5.3 Sending HTML Form Data 5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/28 ...

  4. (转)WebApi发送HTML表单数据：文件上传与多部分MIME

    5.3 Sending HTML Form Data 5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/28 ...

  5. (27) java web的struts2框架的使用-基于表单的多文件上传

    和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...

  6. SpringMVC之表单提交===③===多文件上传表单

    上文简单介绍了springmvc单文件上传表单 ,本文继续介绍多文件上传表单.包含单文件上传的表单已经能够满足大部分功能需求,但任然不够完善.实际业务中可能会包含多个文件同时上传,例如:商家在电商平台 ...

  7. html表单调用js文件上传,简单实现js上传文件功能

    本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一.用input完成上传,效果图如 选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...

  8. 掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！

    今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求 做一个 ...

  9. JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码

    微信小程序开发交流qq群   581478349    承接微信小程序开发.扫码加微信. 利用JQ,jquery.form.js,bootstrap实现上传表单图片和表单信息并把上传的图片地址,inp ...

最新文章

  1. JQ加AJAX 加PHP实现网页登录功能
  2. Java入门—输入输出流
  3. python培训中心-【北京Python培训中心】
  4. ogg批量配置_Macos上一款批量文件重命名工具A Better Finder Rename 11
  5. 【译】10个有趣的JSCSS库（2018.10）
  6. LeetCode 1430. 判断给定的序列是否是二叉树从根到叶的路径（递归）
  7. 怎样搭建本地svn服务器环境－轻松掌握版本管理
  8. TensorFlow：模型的保存与恢复(Saver)
  9. Spring学习手札（二）面向切面编程AOP
  10. nginx 映射ip端口服务
  11. C++隐藏任务栏图标
  12. 最新版百度地图实现导航和语音播报(亲测有效)
  13. 重学React基础知识整理——组件间的另类通信“插槽”（五）
  14. RGB 和 YUV 的认识和相互转换
  15. win下激活python虚拟环境及激活失败解决方案
  16. 色环电阻的识别和检测
  17. vxworks下gmac调试的总结
  18. “科林明伦杯”哈尔滨理工大学第十届程序设计竞赛(同步赛)
  19. phpcms V9 模板使用 模板安装 模板怎么用？
  20. 如何把IDEA中设置像eclipse默认铺开包层次结构

热门文章

  1. @Value 注入静态变量
  2. 视觉设计师跟平面设计_使设计具有视觉吸引力
  3. 白帽子技术分析会话劫持实战讲解
  4. js进阶 9-5 js如何确认form的提交和重置按钮
  5. xtrabackup备份mysql“ib_logfile0 is of different”错误分析
  6. 开放一些常见功能的工具类代码
  7. MySQL的四种不同查询的分析
  8. 51CTO各位博友大家好！
  9. [20190805]在小程序中使用npm包
  10. idea中开启Run Dashboard