介绍:通过使用在 HTML5 中加入到 DOM 的 File API,使在web内容中让用户选择本地文件然后读取这些文件的内容。
概念:FileReader接口 主要是用来把文件读入内存,并且读取文件中的数据,fileReader接口提供异步API
<input>
元素获取单个/多个文件<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>
<!-- 如果你想让用户选择多个文件,只需在 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对象提供了三个有用属性:
- name 文件名称,只读字符串。只包含文件名,不包含任何路径信息。
- size 以字节数为单位的文件大小,只读的64位整数。
3. type 文件的 MIME 类型,只读字符串,当类型不能确定时为 “”。
注意:因为本地文件是HTML5新增特性部分浏览器可能不支持,所以使用前需要做一定判断
if(typeof FileReader == 'undefined'){ alert('你的浏览器未实现 FileReader接口') }
接口方法
var files = document.getElementById('file').files[0]; var reader = new FileReader() //创建一个文件读取器; //将文件以二进制形式读入 reader.readAsBinaryString(files) //把读取的文件二进制数据转化为base64数据.;
var files = document.getElementById('file').files[0]; var reader = new FileReader(); reader.readAsText(files,'utf-8')//读取文件文本内容. 读取txt文件.;
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+'">' } }
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('无论成功失败本次读取操作完毕') }
实现图片上传显示图片功能
要求:
- 上传图片必须是image类型否则,本次上传不合法
- 将图片读取为DataURL,并以img的形式将图片显式在页面上
- console打印当前文件读取的进度即已经读取百分之几
介绍:在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中 要实现拖放操作,至少要经过如下两个步骤
案例:
<div id="dragme" draggable="true" style="width: 200px;border: 1px solid red ">请拖动我</div>
应用程序可以在拖拽操作中包含任意数量的数据项。每个数据项都是一个 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); })
拖拽过程中,浏览器会在鼠标旁显示一张默认图片。当然,应用程序也可以通过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); })
dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖拽过程中浏览器显示的鼠标样式。比如,当用户悬停在目标元素上的时候,浏览器鼠标也许要反映拖放操作的类型。
有三个效果可以定义
- copy 表明被拖拽的数据将从它原本的位置拷贝到目标的位置。
- move 表明被拖拽的数据将被移动。
- 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); })
当拖拽一个项目到 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() 来阻止对这个事件的其它处理过程(如触点事件或指针事件)。
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; // 所有被拖拽的元素都在改属性中 }
实现拖拽图片上传显示图片功能(支持多文件拖拽)
要求:
- 在页面创建一个拖拽目标区域,支持外部文件拖拽到当前区域
- 支持拖拽多个文件,但只有上传文件必须是image类型才会展示在页面上
介绍: indexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象;可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务。
概念:
IndexedDB 数据库有版本的概念。同一个时刻,只能有一个版本的数据库存在。如果要修改数据库结构(新增或删除表、索引或者主键),只能通过升级数据库版本完成。
对象仓库(object store): 每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。
数据记录:对象仓库保存的是数据记录。每条记录类似于关系型数据库的行,但是只有主键和数据体两部分。主键用来建立默认的索引,必须是不同的,否则会报错。主键可以是数据记录里面的一个属性,也可以指定为一个递增的整数编号。
//该对象中,id属性可以当作主键。数据体可以是任意数据类型,不限于对象。 { id: 1 , text: 'foo' }
索引:为了加速数据的检索,可以在对象仓库里面,为不同的属性建立索引。
事务:数据记录的读写和删改,都要通过事务完成。事务对象提供error、abort和complete三个事件,用来监听操作结果。
相关API
注意:使用 IndexedDB 执行的操作是异步执行的,以免阻塞应用程序。
介绍:方法用于打开一个数据库连接。本方法立即返回一个 IDBOpenDBRequest 对象,但打开数据库的操作是异步执行的。
1. 参数一 String 表示数据库的名字。如果指定的数据库不存在,就会新建数据库。
2. 参数二 整数Number,表示数据库的版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1。
连接数据库在一个单独的线程中进行,包括以下几个步骤:
- 指定数据库已经存在时:
- 等待 versionchange 操作完成。
- 如果数据库已计划删除,那等着删除完成。
- 如果已有数据库版本高于给定的 version,中止出发error事件,操作并返回类型为 VersionError 的 DOMError 。
- 如果已有数据库版本低于给定的 version,触发一个 versionchange 操作。
- 如果数据库不存在,创建指定名称的数据库,将版本号设置为给定版本,如果未给定版本号,则设置为1。
- 创建数据库连接。
- 如果操作成功执行,将触发 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('数据库打开报错'); } DBOpenRequest.onupgradeneeded = function (event) { console.log('指定的版本号,大于当前数据库版本号') }
注意: 因为onupgradeneeded方法会在数据库创建时被出发,所以一般情况下我们会将新建数据库操作在onupgradeneeded回调函数中实现。
介绍: 方法用请求删除数据库。本方法立即返回一个 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 };
介绍:方法创建并返回一个新的 object store。
1. 参数一 String 被创建的 object store 的名称。请注意创建空名称的 object store 是被允许的。
2. 参数二 Object 可选的对象,它可以定义重要的可选属性。一般只设置{keyPath: '当前object store的主键'}
DBOpenRequest.onupgradeneeded = function (event) { var db = DBOpenRequest.result var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" }); }
介绍:方法从 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... };
介绍:创建并返回新的IDBIndex对象,该方法只能从versionchange事务模式的回调方法中被调用。
1. 参数一 String 索引名称。
2. 参数二 String 索引所在的属性。
3. 参数三 Object 配置对象。 一般只设置{unique: Boolean}
说明该属性是否包含重复的值值为true是不允许有重复值
request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" }); objectStore.createIndex("hours", "hours", { unique: false }); objectStore.createIndex("minutes", "minutes", { unique: false }); objectStore.createIndex("day", "day", { unique: false }); objectStore.createIndex("month", "month", { unique: false }); objectStore.createIndex("year", "year", { unique: false }); objectStore.createIndex("notified", "notified", { unique: false }); }
介绍:该对象接口由IndexedDB API提供,异步事务使用数据库中的事件对象属性。所有的读取和写入数据均在事务中完成。由IDBDatabase发起事务,通过IDBTransaction 来设置事务的模式(例如:是否只读readonly或读写readwrite),以及通过IDBObjectStore来发起一个请求。
1. 参数一 可以是’storeName’ 也可以是 Array 数组中包含 object store 名 [‘storeName’] 表示当前事务处理的表
2. 参数二 可选值 ‘readonly’ 只读 或者 'readwrite’读写
通过IDBTransaction.objectStore(storeName)方法,拿到 IDBObjectStore 对象,就可以向对象仓库进行读写操作了
var transaction = db.transaction(['toDoList'], 'readwrite') transaction.onabort = function (e) { // 事务被中止时触发,这可能是由于: // 错误的请求,例如尝试向 add() 添加同一个键两次 // 来自脚本的显式abort()调用 // 请求的成功/错误处理程序中出现未捕获的异常, // I/O错误(实际写入磁盘失败,例如磁盘分离或其他操作系统/硬件故障),或 // 超过配额。 } transaction.oncomplete = function(e) { // 在事务成功完成时触发。 } transaction.onerror = function(e) { // 在事务成失败时触发。 } // 获取当前事务处理的 objectStore var objectStore = transaction.objectStore('person')
介绍:返回一个IDBRequest对象,并且在新线程中克隆一个值,该值存储在表中。
1. value 被存储的值
2. key 标识某条记录的键,如果不指定,它会被设为null。
var transaction = db.transaction(["toDoList"], "readwrite"); var objectStore = transaction.objectStore('toDoList') var objectStoreRequest = objectStore.add( { taskTitle: 'title1', hours: 12 , minutes: 36, day: 1, month: 5, year: 2020, notified: "no" }) objectStoreRequest.onsuccess = function(event) { cosonle.log('数据添加成功') }; objectStoreRequest.onerror = function(event) { console.log("数据添加失败"); };
介绍:创建并立即返回一个 IDBRequest 对象,并且在一个单独的线程中清除这个对象存储.删除由给定键或键范围指定的记录以及引用该对象的任何索引。
var transaction = db.transaction(["toDoList"], "readwrite"); var objectStore = transaction.objectStore('toDoList') var objectStoreRequest = objectStore.delete ('title1') objectStoreRequest.onsuccess = function(event) { cosonle.log('数据删除成功') var request = objectStore.delete('title1') }; objectStoreRequest.onerror = function(event) { console.log("数据删除失败"); };
介绍:读取数据,立即返回IDBRequest对象,并在单独的线程中从对象存储中检索请求的记录。如果操作成功,则对返回的对象触发成功事件,其结果设置为检索到的值。
var transaction = db.transaction(["toDoList"], "readonly"); var objectStore = transaction.objectStore('toDoList') var request = objectStore.get('title1'); request.onerror = function(event) { console.log('事务失败'); }; request.onsuccess = function( event) { console.log('获得的数据:', request.result); };
介绍:更新数据,返回一个IDBRequest对象,并在单独的线程中创建该值的结构化克隆,并将克隆的值存储在对象存储区中。如果成功存储了记录,则在返回的请求对象上触发一个成功事件。
var transaction = db.transaction(["toDoList"], "readwrite"); var objectStore = transaction.objectStore('toDoList') var objectStoreRequest = objectStore.put({ taskTitle: 'title1', hours: 14, minutes: 25, day: 2, month: 5, year: 2019, notified: "no" }) objectStoreRequest.onsuccess = function(event) { cosonle.log('数据更新成功') }; objectStoreRequest.onerror = function(event) { console.log("数据更新失败"); };
介绍:立即返回一个IDBRequest对象,位于一个单独的线程中。如果有一条及以上条记录与键范围匹配,那么将触发一个成功事件,并将记录作为结果返回。如果没有与键范围匹配的记录,则对返回的对象触发一个成功事件,其结果设置为null。
注意:getAll() 是在this.result一次性获取所有的值,而openCursor()需要使用this.result.continue()遍历下一条值
var transaction = db.transaction("toDoList"); var objectStore = transaction.objectStore('toDoList') objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('所有匹配数据', cursor) cursor.continue(); // 遍历下一条数据 } else { console.log('没有更多数据了!'); } }; var request = objectStore.getAll() // 无序遍历获取对象仓库中所有的值 request.onsuccess = function () { console.log(this.result) }
介绍:使用索引,通过该方可以打开对象存储中的命名索引,可以不使用主键搜索任意字段。
DBOpenRequest.onupgradeneeded = function (event) { var db = DBOpenRequest.result // 默认情况下我们通过 taskTitle 的 value 值作为索引 var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" }); // 下面这些建立的索引都可以使用 index() 方法打开命名索引 objectStore.createIndex("hours", "hours", { unique: false }); objectStore.createIndex("minutes", "minutes", { unique: false }); objectStore.createIndex("day", "day", { unique: false }); objectStore.createIndex("month", "month", { unique: false }); objectStore.createIndex("year", "year", { unique: false }); objectStore.createIndex("notified", "notified", { unique: false }); } var transaction = db.transaction(['toDoList'], 'readonly'); var store = transaction.objectStore('toDoList'); var index = store.index('month'); // 打开 month 命名索引 var request = index.get('2020'); // 通过 month 命名索引获取 request.onsuccess = function (e) { var result = e.target.result; if (result) { // ... } else { // ... } } var transaction = db.transaction('toDoList', 'readonly') var objectStore = transaction.objectStore('toDoList') // 指定使用什么索引属性查询数据 var index = objectStore.index('name') /* // 指定获取第一个name = 小刚的值 var request = index.get('小刚') request.onsuccess = function () { var result = this.result console.log(result) } */ // 获取多个 name = 小刚的值 var request = index.openCursor('小刚') request.onsuccess = function () { var result = this.result if(result) { console.log(result.value, this) result.continue() } } // 获取所有 name = 小刚 的值 var request = index.getAll('小刚') request.onsuccess = function () { console.log('success', this.result) }
介绍:创建并立即返回一个 IDBRequest 对象, 并且在一个单独的线程中清除这个对象存储. 清除对象存储包括从对象存储中删除所有的记录,并删除对象存储引用的索引中的所有记录。
var transaction = db.transaction(["toDoList"], "readwrite"); var objectStore = transaction.objectStore('toDoList') var objectStoreRequest = objectStore.clear() objectStoreRequest.onsuccess = function(event) { cosonle.log("objectStore数据清除成功") }; objectStoreRequest.onerror = function(event) { console.log("objectStore数据清除失败"); };
}
}
// 获取所有 name = 小刚 的值
var request = index.getAll(‘小刚’)
request.onsuccess = function () {
console.log(‘success’, this.result)
}
### objectStore.clear() **介绍**:创建并立即返回一个 IDBRequest 对象, 并且在一个单独的线程中清除这个对象存储. 清除对象存储包括从对象存储中删除所有的记录,并删除对象存储引用的索引中的所有记录。 ```javascript var transaction = db.transaction(["toDoList"], "readwrite"); var objectStore = transaction.objectStore('toDoList') var objectStoreRequest = objectStore.clear() objectStoreRequest.onsuccess = function(event) { cosonle.log("objectStore数据清除成功") }; objectStoreRequest.onerror = function(event) { console.log("objectStore数据清除失败"); };