分享更有价值
被信任是一种快乐

html5的api如何使用

文章页正文上

本文小编为大家详细介绍“html5的api如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5的api如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
  HTML5新增的API的使用
  window.navigator.onLine检查网络状态(false为未连接,true为已连接)
  检测网络连接的事件(浏览器的兼容性问题)
  A、’online’:网络连接
  B、’offline’:网络断开
  全屏显示:控制浏览器的全屏显示
  (具有浏览器的兼容问题)
  A、webkitRequestFullScreen()方法:谷歌浏览器实现全屏显示
  B、webkitCancelF免费云主机、域名ullScreen()方法:谷歌浏览器关闭全屏显示
  C、webkitIsFullScreen()方法:判断谷歌浏览器是否全屏。
  火狐浏览器前面带moz ?例如:mozRequestFullScreen()方法
  IE浏览器前面带ms ? ?例如:msRequestFullScreen()方法
  文件读取
  1、FileReader对象:读取本地文件(文件名、路径)
  2、File对象:读取文件的内容
  3、DataTransfer对象:拖放文件的对象
  浏览器不允许JavaScript直接访问文件系统,使用input表单元素的文件域实现文件的上传。
  强调1: ?multiple表示选择文件时可以选择多个文件。
  :会返回一个FileList对象给对象保存在files属性中,可以通过索引的方式访问该对象中的所有元素。
  FileList对象(文件列表)里面存放的是File对象(文件对象)每个File对象中有三个常用属性:
  name :文件名? ? ? ? ? ?size :文件的大小(以字节为单位)? ? ? ? type :文件的类型
  强调2:onchange事件:当用户选择文件发生改变时触发该事件。
  4、FileReader的使用方法:
  a、创建FileReader对象:new FileReader()
  b、使用该对象的相关方法来读取文件
  readAsBinaryString(file):将文件读取为二进制编码
  readAsText(file,[encoding]):将文件读取为文本格式
  readAsDataURL():将文件读取为DataURL方式(通常用来读取图片的缩略图)
  abort():中断读取操作
  c、访问该对象的result属性得到读取结果
  d、文件读取的常用事件:
  onload:读取成功时触发
  onloadnd:文件读取完成时触发(无论文件读取是否成功都触发)
  onerror:文件读取错误时触发
  onabort:文件读取中断时触发
  实例:
  //DOM的方法读取文档内容
  var file = document.querySelector(’input’)
  var div = document.querySelector(’div’)
  file.onchange = function(){ //当文件选择’file’控件发生变化时触发
  console.log(file.files) //files属性存放的是一个FileList对象(用户选取的文件列表对象
  //返回的内容含有索引,返回的为文件列表
  for(var i=0;i
  console.log(file.files[i].name)
  }
  //1.创建FileReader对象
  var reader = new FileReader()
  //2.读取文件为文本格式
  reader.readAsText(this.files[0]) //读取第一个文件的内容为文本格式
  //3.注册onload事件,将文件的内容放入div中
  reader.onload = function(){
  div.innerHTML = this.result //this代表的是reader,this是一个DOM对象
  }
  }读到这里,这篇“html5的api如何使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注云技术行业资讯频道。

相关推荐: css中的resize属性怎么用

这篇文章将为大家详细讲解有关css中的resize属性怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   css3resize属性   作用:规定是否可由用户调整元素尺寸。   说明:Firefox、Chrome以及S…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册