H5新增API

最新推荐文章于 2024-08-29 11:54:05 发布

Shimeng_1989

最新推荐文章于 2024-08-29 11:54:05 发布

阅读量960

点赞数

文章标签： file拖拽点击上传文件 drag拖拽事件 contenteditable内容可编辑 GeoLocation获取地理位置

本文链接：https://blog.csdn.net/Shimeng_1989/article/details/75390565

版权

本文介绍了HTML5的新特性，包括文件上传的详细步骤，如利用FileReader读取文件，以及drag和drop事件实现拖拽上传。同时，讲解了contenteditable属性让元素内容可编辑，fullScreen全屏功能及其兼容性处理，GeoLocation获取地理位置的API用法，并提及visibility、storage等其他相关API的应用。

摘要由CSDN通过智能技术生成

file 文件（上传）

步骤：

获取（file的）input 标签：

var input=document.querySelector(" # file " )

监听 onchange 事件：

input . onchange = function ( ) { console.log ( this . files )}

此处输出：file数组（ file对象包含的信息：）

lastModified 最后一次修改时间（毫秒）

lastModifiedDate 最后一次修改日期

name: 文件名

type：文件类型

size：文件大小

获取 / 遍历所有上传的file文件

for(var i=0;i<=this.files.length;i++){

创建阅读实例

var fr= new FileReader ( )

设置读取方式

readAsDataURL ( file )

readAsDataURL( file) 以地址读取，接收参数为：文件对象
- readAsText( file) 以文本读取
  - readAsBinaryString(file ) 以二进制读取

监听onload（等）事件

fr.οnlοad=function ( ) { }

onload：读取完成
- onloadstart 开始读取
  - onloadend 结束读取无论成功失败都会触发
    - onerror 错误触发（读取出错时）
  - onabort 中断读取时触发

创建图片/ 文件并追加到body里面去

var img=new Image( ) ; img.src=this.result

document.body.appendChild(img)

  //console.log ( this . files ) 输出 ：
  FileList {
  0: File, length: 1}
  > file：（展开之后为以下内容）
      length: 10: 
      FilelastModified: 1463621270000
      lastModifiedDate: Thu May 19 2016 09:27:50 GMT+0800 (中国标准时间)
      name: "background.png"
      size: 28052type: "image/png"
      webkitRelativePath: ""
  > __proto__: File__proto__: FileList

  
  // html
  <input type="file" name="" id="file" multiple
  // JS
  var inp=document.querySelector("#file");
      inp.onchange=function(){
  
          console.log(this.files);
          for(var i=0;i<=this.files.length;i++){
  
              var file=this.files[i];
              console.log(file);
                  var fr= new FileReader();
              // fr.readAsDataURL(file);//接收参数为：文件对象