热门关键字:
jquery > jquery教程 > jquery教程 > html5 移动设备api,HTML5新增API,移动端Web布局

html5 移动设备api,HTML5新增API,移动端Web布局

349
作者:管理员
发布时间:2021/8/20 18:21:20
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5292
  目录


  HTML5新增的API的使用


  window.navigator.onLine检查网络状态(false为未连接,true为已连接)


  检测网络连接的事件(浏览器的兼容性问题)


  A、'online':网络连接


  B、'offline':网络断开


  全屏显示:控制浏览器的全屏显示


  (具有浏览器的兼容问题)


  A、webkitRequestFullScreen()方法:谷歌浏览器实现全屏显示


  B、webkitCancelFullScreen()方法:谷歌浏览器关闭全屏显示


  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对象


  }


  }




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐