4.HTML5新特性：拖拽API与本地数据库

Posted 2021-09-21 W蘭

``本地文件

介绍：通过使用在 html5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容。

概念：FileReader接口 主要是用来把文件读入内存,并且读取文件中的数据,fileReader接口提供异步API

• 在学习FileReader接口之前我们先来了解下如何通过<input>元素获取单个/多个文件

1. 单个文件

<input type="file" id="input">

<script>
// 获取input元素的DOM节点
const inputElement = document.getElementById("input");
// 绑定change监听事件，当用户选择文件时触发
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  // 因为input表单默认只能选择了一个文件，那么只需要获取列表中的第一个文件
  const selectedFile = this.files[0]; 
}
</script>

2. 多个单个文件

<!-- 如果你想让用户选择多个文件，只需在 input 元素上使用 multiple 属性： -->
<input type="file" id="input" multiple >

<script>
// 获取input元素的DOM节点
const inputElement = document.getElementById("input");
// 绑定change监听事件，当用户选择文件时触发
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  // 因为是多选通过表单元素的files就可以获取选中的所有文件列表
  const fileList = this.files; 
}
</script>

表单元素的files是一个伪数组包含所有的File对象，File对象提供了三个有用属性：

1. name 文件名称，只读字符串。只包含文件名，不包含任何路径信息。
2. size 以字节数为单位的文件大小，只读的64位整数。
   3. type 文件的 MIME 类型，只读字符串，当类型不能确定时为 “”。

注意：因为本地文件是HTML5新增特性部分浏览器可能不支持,所以使用前需要做一定判断

 if(typeof FileReader == 'undefined'){
            alert('你的浏览器未实现 FileReader接口')
        }

接口方法

• readAsBinaryString(file)： 将文件读取为二进制码,通常用来传后端。

var files = document.getElementById('file').files[0];
var reader = new FileReader() //创建一个文件读取器;
//将文件以二进制形式读入
reader.readAsBinaryString(files) //把读取的文件二进制数据转化为base64数据.;

• readAsText(file,charset)： 将文件读取为文本，该方法接受两个参数：
  1. 参数一：需要读取的文本文件对象
  2. 参数二：文本文件的编码格式，默认值为"utf-8"

var files = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(files,'utf-8')//读取文件文本内容. 读取txt文件.;

• readAsDataURL(file)：将文件读取为DataURL，该方法实际上是将小文件以一种特殊格式的url形式直接读入页面

  function readAsDataURLTest(){
        var files = document.getElementById('file').files[0];
        console.log(files);
        //判断是否为图片文件
        if(!/image\\/\\w+/.test(files.type)){
            alert('选择图片类型文件');
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(files);
        reader.onerror = function(){
            alert('读取失败请重新上传');
        };
        reader.onload = function(e){
            var result = document.getElementById('result');
            result.innerHTML = '<img src="'+this.result+'">'
        }
    }

• abort() 该方法用来终端读取操作。

var files = document.getElementById('file').files[0];

var reader = new FileReader();

reader.readAsText(files,'utf-8');

// 读取被终端了
reader.abort()

事件
介绍：FileReader除了提供了上述API方法以外还包含了一套完整的事件模型，用于捕获读取文件时的状态。

• onabort 数据读取中断时触发
• onerror 数据读取出错时触发
• onloadstart 数据读取开始时触发
• onprogress 数据读取中
• onload 数据读取完成，在该事件中FileReader对象的result属性将会返回读取到的文件
• onloadend 数据读取完成时触发,无论成功与失败

var file = document.getElementById('file').files[0];

var reader = new FileReader();

reader.readAsText(file,'utf-8');

reader.onabort = function(){
    console.log('文件读取操作被终止')
}

reader.onerror = function(){
    alert('读取失败请重新上传');
};

reader.onloadstart = function () {
    console.log('文件开始读取')
}

reader.onprogress = function() {
    // e.loaded   fileReader 已经读取了多少字节
    console.log('文件正在读取中...', e.loaded , file.size)
}

reader.onload = function(e){
    var result = this.result
    console.log('读取成功', result) 
}


reader.onloadend = function(e){
    console.log('无论成功失败本次读取操作完毕') 
}

「课堂练习」

实现图片上传显示图片功能

要求：

1. 上传图片必须是image类型否则，本次上传不合法
2. 将图片读取为DataURL，并以img的形式将图片显式在页面上
3. console打印当前文件读取的进度即已经读取百分之几

---

拖拽API

介绍：在HTML5之间实现拖放（drag and drop）只能依靠jQuery这样的js库才能实现，而HTML5添加了对拖放的支持，将拖放内置到浏览器中保证了拖放可以跨浏览器工作。

一个典型的拖拽操作是这样的：用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

概念：HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events 。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发,所有的 拖拽事件类型 有一个对应的 拖拽全局属性，其内容如下：

事件	产生事件的元素	触发时刻
dragstart	可拖拽元素本身	当用户开始拖拽一个元素或选中的文本时触发
drag	被拖放的元素	当拖拽元素或选中的文本时触发。
dragenter	拖放的目标元素（被拖拽项目可能放置的地方）	当拖拽元素或选中的文本到一个可释放目标时触发
dragover	拖放的目标元素 （被拖拽项目可能放置的地方）	当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
drop	拖放的目标元素	当元素或选中的文本在可释放目标上被释放时触发
dragend	可拖拽元素本身	当拖拽操作结束时触发（无论拖拽是成功还是被取消）

注意：在HTML5中 要实现拖放操作,至少要经过如下两个步骤

1. 将想要拖放的对象元素的draggable属性设置为true,注意img元素和a元素(必须指定href)默认允许拖放
2. 编写与拖放有关的事件处理代码,如定义拖拽数据、定义拖拽效果、定义放置区域、处理放置效果、处理拖拽结束

案例：

1. 将元素设置为可拖拽的

<div id="dragme" draggable="true" style="width: 200px;border: 1px solid red ">请拖动我</div>

2. 定义拖拽数据

应用程序可以在拖拽操作中包含任意数量的数据项。每个数据项都是一个 string 类型，典型的 MIME 类型，如：text/html。

var dragme = document.getElementById('dragme');

// 拖动开始
dragme.addEventListener('dragstart',function(evt){
// 每个 drag event 都有一个dataTransfer 属性，其中保存着事件的数据。
// DataTransfer 对象包含了拖拽事件的状态，例如拖拽事件的类型（如拷贝 copy 或者移动 move），拖拽的数据（一个或者多个项）和每个拖拽项的类型（MIME类型）。  
// setData() 方法为拖拽数据添加一个项
evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

3. 定义拖拽图像（可选）

拖拽过程中，浏览器会在鼠标旁显示一张默认图片。当然，应用程序也可以通过setDragImage() 方法自定义一张图片
setDragImage(img, xOffset, yOffset)
参数一：是一个图像的引用（不仅可以是图片）
参数第二、三：是图像位置相对于鼠标指针位置的偏移量

// 拖动开始
dragme.addEventListener('dragstart',function(evt){
// 使用js创建一个image对象 
var img = new Image(); 
// 给img对象指定图片地址
img.src = 'example.gif';
// 设置拖拽图图像
ev.dataTransfer.setDragImage(img, 10, 10);

evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

4. 定义拖拽效果(可选)

dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖拽过程中浏览器显示的鼠标样式。比如，当用户悬停在目标元素上的时候，浏览器鼠标也许要反映拖放操作的类型。
有三个效果可以定义

1. copy 表明被拖拽的数据将从它原本的位置拷贝到目标的位置。
2. move 表明被拖拽的数据将被移动。
3. link 表明在拖拽源位置和目标位置之间将会创建一些关系表格或是连接。

effectAllowed 属性以指定允许拖拽源头执行三种操作中的哪几种。
none 不允许操作
copy 只复制
move 只移动
link 只链接
copyMove 复制或移动
copyLink 复制或链接
linkMove 链接或移动
all 复制、移动或链接（默认值）

// 拖动开始
dragme.addEventListener('dragstart',function(evt){
// 允许元素进行哪些操作，一般情况下你不需要调整这个属性，除非你想要排除某个特定操作。
evt.dataTransfer.effectAllowed = "copy";
// 定义拖拽效果
evt.dataTransfer.dropEffect = "copy";

evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

5. 定义放置区域

当拖拽一个项目到 HTML 元素中时，浏览器默认不会有任何响应。想要让一个元素变成可释放区域，该元素必须设置 ondragover 和 ondrop 事件处理程序属性

 <div id="target">放置区域</div>

<script>
var target = document.getElementById('target')

target.addEventListener('dragover',function(evt) {
    evt.preventDefault()
})

target.addEventListener('drop',function(evt) {
    evt.preventDefault()
})

</script>

注意：注意每个处理程序调用 preventDefault() 来阻止对这个事件的其它处理过程（如触点事件或指针事件）。

6. 处理放置效果、处理拖拽结束

drop 事件的处理程序是以程序指定的方法处理拖拽数据。一般，程序调用 getData() 方法取出拖拽项目并按一定方式处理。

<p id="target">放置区域</p>

<script>
var target = document.getElementById('target')

target.addEventListener('dragover',function(evt) {
    evt.preventDefault()
})

target.addEventListener('drop',function(evt) {
    evt.preventDefault()

     // getData() 方法获取指定拖拽数据项的值
     var data = evt.dataTransfer.getData("text/plain");
     var html = evt.dataTransfer.getData("text/html");
     var id = evt.dataTransfer.getData("application/my-app");
     var href = evt.dataTransfer.getData("text/uri-list");
     console.log(data, html, href)

     // 将拖拽元素移动到目标元素内部
     evt.target.appendChild(document.getElementById(id));
})

</script>

注意：拖拽支持外部文件拖拽，在drop事件中可通过evt.dataTransfer.files获取文件对象列表。

function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;  // 所有被拖拽的元素都在改属性中

}

「课堂练习」

实现拖拽图片上传显示图片功能（支持多文件拖拽）

要求：

1. 在页面创建一个拖拽目标区域，支持外部文件拖拽到当前区域
2. 支持拖拽多个文件，但只有上传文件必须是image类型才会展示在页面上

---

浏览器数据库 indexedDB

介绍： indexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 javascript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

概念：

1. 数据库（IndexedDB）: 数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。

2. 对象仓库（object store）: 每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。

3. 数据记录：对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。

//该对象中，id属性可以当作主键。数据体可以是任意数据类型，不限于对象。
{ id: 1 , text: 'foo' }

4. 索引：为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。

5. 事务：数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。

相关API

注意：使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

indexedDB.open(databaseName, version)

介绍：方法用于打开一个数据库连接。本方法立即返回一个 IDBOpenDBRequest 对象，但打开数据库的操作是异步执行的。
1. 参数一 String 表示数据库的名字。如果指定的数据库不存在，就会新建数据库。
2. 参数二 整数Number，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

连接数据库在一个单独的线程中进行，包括以下几个步骤：

1. 指定数据库已经存在时：
   • 等待 versionchange 操作完成。
   • 如果数据库已计划删除，那等着删除完成。
2. 如果已有数据库版本高于给定的 version，中止出发error事件，操作并返回类型为 VersionError 的 DOMError 。
3. 如果已有数据库版本低于给定的 version，触发一个 versionchange 操作。
4. 如果数据库不存在，创建指定名称的数据库，将版本号设置为给定版本，如果未给定版本号，则设置为1。
5. 创建数据库连接。
6. 如果操作成功执行，将触发 success 事件

var DBOpenRequest = window.indexedDB.open("toDoList", 1)
DBOpenRequest.onsuccess = function (e) {
    console.log('success')
    // 将打开数据库的结果返回当前数据库IDBDatabase对象，可用于在今后操作数据库。
    // IDBDatabase对象表示一个数据库连接。这是在数据库中获取事务的唯一方式。
    console.log(DBOpenRequest.result)
}

DBOpenRequest.onerror = function (event) {
    console.log('数据库打开报错');
}
//onupgradeneeded这个事件只有数据库不存在的时候，创建新数据的时候才会被触发
DBOpenRequest.onupgradeneeded = function (event) {
    console.log('指定的版本号，大于当前数据库版本号')
}

注意： 因为onupgradeneeded方法会在数据库创建时被出发，所以一般情况下我们会将新建数据库操作在onupgradeneeded回调函数中实现。

indexedDB.deleteDatabase(databaseName)

介绍： 方法用请求删除数据库。本方法立即返回一个 DBDeleteRequest 对象。

1. 参数一 String 表示需要删除数据库的名字。如果指定的数据库不存在不会报错。

var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");

DBDeleteRequest.onerror = function(event) {
  console.log("Error deleting database.");
};
 
DBDeleteRequest.onsuccess = function(event) {
  console.log("Database deleted successfully");
    
  console.log(event.result); // should be undefined
};

IDBDatabase.createObjectStore(storeName, optional)

介绍：方法创建并返回一个新的 object store。
1. 参数一 String 被创建的 object store 的名称。请注意创建空名称的 object store 是被允许的。
2. 参数二 Object 可选的对象，它可以定义重要的可选属性。一般只设置{keyPath: '当前object store的主键'}

DBOpenRequest.onupgradeneeded = function (event) {
     //  onupgradeneeded 这个事件只有数据库不存在的时候，创建新的数据库的时候才会触发执行
    var db = DBOpenRequest.result //数据库创建成功后，会得到以数据对象.
     //创建对象仓库.配置项{keyPath:"id"} 表示数据对象里面id为主键 唯一且可以用查询数据.返回对象仓库实例对象.
    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
}

• db.objectStoreNames.contains(‘person’)

IDBDatabase.deleteObjectStore(storeName)

介绍：方法从 IDBDatabase 中销毁指定名称的对象存储，及这个对象存储所包含的任何索引。
1. 参数一 String 将要删除的 object store 的名称。

var request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function(e) {
  var db = request.result;
 
    db.createObjectStore("store1");

    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  
  // etc. for version < 3, 4...
};

IDBObjectStore.createIndex(name, keyPath, optional)

介绍：创建并返回新的IDBIndex对象，该方法只能从versionchange事务模式的回调方法中被调用。
1. 参数一 String 索

以上是关于4.HTML5新特性：拖拽API与本地数据库的主要内容，如果未能解决你的问题，请参考以下文章

前端面试

MongoDB 5.0新特性概览

Java9 进程API详细介绍

H5新特性总结

Html5新特性有哪些

拖拽报表设计香不香—JimuReport 1.4.0新特性