娱乐网站建设,宁波网站建设多少钱一年,网站怎么对接微信支付宝,手机上怎么做能打开的网站吗前言 因 Unicode IDE 编辑器导入文件、文件夹需要#xff0c;研究了下导入文件/文件夹的功能实现#xff0c;发现目前相关文章有点少#xff0c;故而记录下过程#xff0c;如果有误#xff0c;还望指正。(API的兼容性及相关属性、接口定义#xff0c;请自行查看文件系统 …前言 因 Unicode IDE 编辑器导入文件、文件夹需要研究了下导入文件/文件夹的功能实现发现目前相关文章有点少故而记录下过程如果有误还望指正。(API的兼容性及相关属性、接口定义请自行查看文件系统 API) 文件 API 文件 API 使得 web 应用可以访问文件和其中的内容当我们想要访问一个文件可以通过input typefile 或者 拖放 来实现。以这种方式提供的文件集被表示为 FileList 对象这使得 web 应用能够检索单个 File 对象。 const input document.createElement(input);input.type file;input.multiple true;input.addEventListener(change, () {// 当然此处也可以使用事件源 e 来获取 FileList 对象哈e.target 指向 inputconst fileList input.files;console.log( , fileList);});input.click(); Blob Blob 代表“二进制大对象”类似于文件的不可变的原始数据对象Blob 可以作为文本或二进制数据被读取或者转换为 ReadableStream。我们常用来处理大文件数据分片里面有一个 Blob.slice() 方法用于获取指定字节范围内的数据。 input.addEventListener(change, () {// 当然此处也可以使用事件源 e 来获取 FileList 对象哈e.target 指向 inputconst fileList input.files;// 以第一个 File 对象为例获取 Blobconst file fileList![0];const blob new Blob([file], { type: file.type });console.log( , blob);}); File File 对象提供对元数据的访问如文件的名称、大小、类型和最后修改日期提供文件的信息并允许网页中的 JavaScript 代码访问其中的内容通常利用File进行内容读取、进行网络传输等。
FileReader 使 web 应用能够异步读取存储在用户计算机上的文件或原始数据缓冲区的内容使用 File 或 Blob 对象来指定要读取的文件或数据。 通常FileReader 是异步的因为读取文件内容是需要时间的因此可以通过监听 load 实现读取成功完成时回调处理。读取文件还能将文件读成多种结果类型 input.addEventListener(change, () {// 当然此处也可以使用事件源 e 来获取 FileList 对象哈e.target 指向 inputconst fileList input.files;// 以第一个 File 对象为例获取 Blobconst file fileList![0];const fileReader new FileReader();fileReader.onload () {console.log(fileReader.result);};fileReader.readAsText(file);}); Tips:关于上诉 FileReader、Blob、File等常见数据类型的定义、转换不在本篇的讨论范围哈网上也有很详细的说明大家搜索一下就可以了我推荐两篇文章大家可以看看~
谈谈JS二进制File、Blob、FileReader、ArrayBuffer、Base64https://juejin.cn/post/7148254347401363463?searchId20241113152541CCE5E6FEB74927A4CFEBjs二进制及其相关转换全总结(File、Blob、FileReader、ArrayBuffer、Base64、Object URL、DataURL...)https://juejin.cn/post/7395866692798201871?searchId20241113152055D9FE2B4CE63230A35055 文件系统 API 用户直接操作系统文件是非常危险的行为因此此API要求在安全上下文可用。 File System API 允许程序与用户本地设备上的或是用户能够访问的网络文件系统上的文件进行交互。此 API 的核心功能包括读取文件、写入或保存文件以及访问目录结构。大多数与文件和目录的交互都通过句柄来完成: 句柄是指在Web API中用于操作文件系统的接口或对象。 通过这些句柄Web应用可以实现对本地文件系统的读取、写入、导航等操作。 File System API允许Web应用在用户的设备上创建、读取、导航用户本地文件系统中的沙盒部分并向其中写入数据。 FileSystemHandle 接口是代表一个文件或一个目录的对象在大多数情况下你不会直接使用 FileSystemHandle而是会用到它的 FileSystemFileHandle 和 FileSystemDirectoryHandle 子接口。 文件处理
文件处理最简单的就是 input file了这里就不演示了 FileSystemFileHandle 接口表示一个指向文件系统条目的句柄。可通过 window.showOpenFilePicker() 方法来访问此接口 try {// 通过文件选择器获取文件const file await window.showOpenFilePicker();console.log( , file);} catch (error) {console.error(error);} 如上演示效果尽管已经可以调用文件但是 ts 还是报错了可以通过自定义 Window 的接口来解决这个问题明确告诉window上存在这个方法即可还可以拓展一些其他的属性便于后期的操作哈~ window.showOpenFilePicker() 返回的结果是一个PromiseFileSystemFileHandle[]是个数组我们应该如何获取该文件的具体内容呢 读取文件内容
FileSystemFileHandle有一个getFile方法用于返回一个 File 对象有了这个对象剩下的就是创建 FileReader 读取就可以啦 try {// 通过文件选择器获取文件const fileListHandle await window.showOpenFilePicker();fileListHandle.forEach(async (fileHandle) {const file await fileHandle.getFile();const fileReader new FileReader();fileReader.readAsText(file);fileReader.onload () {const text fileReader.result;console.log( 文件内容, text);};});} catch (error) {console.error(error);} 写入文件
上面演示了如何读取文件内容那么我们该如何修改文件内容呢createWritable()方法用于创建一个 FileSystemWritableFileStream 对象可用于写入文件。 try {// 通过文件选择器获取文件const fileListHandle await window.showOpenFilePicker();// 拿第一个文件做演示哈const fileHandle fileListHandle[0];// 创建写入句柄const writable await fileHandle.createWritable();// 将文件内容写入到流中。await writable.write(当前时间${getDate()});// 关闭文件并将内容写入磁盘。await writable.close();console.log( 写入文件成功);} catch (error) {console.error(error);} 还有同步写入的方法createSyncAccessHandle这里就不演示了哈。如果写入的文件系统有权限要求可能需要在获取句柄时查询权限参数。 文件夹处理 FileSystemDirectoryHandle 接口提供指向一个文件系统目录的句柄。这个接口可以通过 window.showDirectoryPicker()、
StorageManager.getDirectory()、
DataTransferItem.getAsFileSystemHandle() 、
FileSystemDirectoryHandle.getDirectoryHandle() 这些方法来获取。
因此文件夹的处理方式要多一些FileSystemDirectoryHandle.getDirectoryHandle() 与第一个有重叠部分因此本文仅讲解第一种(点击上传)、第三种(拖拽上传)方式获取文件夹句柄。第二种是Web Worker 点击上传文件夹 try {// 获取文件夹句柄const dirHandle await window.showDirectoryPicker();console.log( , dirHandle);} catch (error) {} window.showDirectoryPicker() 会返回一个文件夹句柄里面有几个关键的函数getDirectoryHandle、getFileHandle、迭代器。 // 获取文件夹句柄const dirHandle await window.showDirectoryPicker();for await (const item of dirHandle.values()) {console.log( , item);} 如果是文件的话就获取文件句柄如果是文件夹的话就获取文件夹句柄递归直到读取完成 function directoryPickerHandle(files: FileSystemDirectoryHandle) {const reader new FileReader();// 2. 递归解析文件夹内容async function entryFolder(handle: FileSystemDirectoryHandle) {for await (const item of handle.values()) {// 判断文件还是文件夹if (item.kind file) {// 创建文件读取器, 会返回 FileSystemFileHandleconst fileHandle await handle.getFileHandle(item.name);// 调用 getFile() 获取文件对象(File)const file await fileHandle.getFile();const fullpath (handle.parentName || ) / handle.name / file.name;console.log( 文件完整路径, fullpath);// 创建 Reader 读取器读取文件内容reader.onload () {};reader.readAsText(file, UTF-8);} else if (item.kind directory) {// 创建文件夹读取器返回 FolderSystemHandleconst folderHandle await handle.getDirectoryHandle(item.name);const fullpath handle.name / item.name;// 记录该路径folderHandle.parentName handle.name;console.log( 文件夹完整路径, fullpath);entryFolder(folderHandle);}}}// 3. 启动entryentryFolder(files);
} 这样就能识别文件夹内的所有目录、文件内容啦。这里面有一个注意事项哈const folderHandle await handle.getDirectoryHandle(item.name); 这里创建的 getDirectoryHandle 恰好就是 类型四返回的文件夹句柄又转向递归实现读取文件夹操作。 拖拽上传文件夹 DataTransferItem 接口的 getAsFileSystemHandle() 方法返回一个 FileSystemFileHandle若拖动的项目是文件或 FileSystemDirectoryHandle若拖动的项目是目录。
拖拽上传需要设置HTML draggabletrue并且监听三个事件
window.onload () {const box document.querySelector(.box);box?.addEventListener(dragenter, (e) e.preventDefault());box?.addEventListener(dragover, (e) e.preventDefault());box?.addEventListener(drop, (e: Event) {// 阻止导航e.preventDefault();const event DragEvente;// 获取拖拽的数据console.log( , event.dataTransfer);});
};咋一看好像结果为空明明拖拽文件夹了结果集还是空的那是因为你放手的瞬间数据传输已经完成了。 box?.addEventListener(drop, (e: Event) {// 阻止导航e.preventDefault();const event DragEvente;const items event.dataTransfer?.items;if (!items) return;for (const item of items) {// 获取文件系统句柄const entry item.webkitGetAsEntry()!;console.log( , entry);}}); 当你拖拽文件和拖拽文件夹时是不同的数据类型哦注意一下 拖拽的是文件的话可以调用 files() 进行文件读取 const fileEntry FileSystemFileEntryentry;fileEntry.file((file: File) {// 创建 fileReaderconst reader new FileReader();reader.readAsText(file, UTF-8);reader.onload async () {};});
拖拽的是文件夹的话递归继续调用 // 文件夹,创建读取器const folderRntry FileSystemDirectoryEntryentry;// 记录需要创建的文件夹路径console.log( 记录文件夹路径, folderRntry.fullPath);const reader folderRntry.createReader();reader.readEntries((files) {files.forEach((file) dataTransferHandle(file));}); 如果想要实现记录完整文件名称的话可以跟上诉示例一样自定义parentName 实现。
总结 我们通过 FileSystemFileHandle 可以进行文件内容读取、修改文件内容等文件相关操作同时利用 FileSystemDirectoryHandle 提供的能力可以实现点击上传并识别文件夹目录对文件夹内文件进行内容读取还利用DataTransferItem实现了拖拽上传文件/文件夹利用其能力也能识别文件夹目录及对文件进行读取操作。同时拖拽上传还支持纯文本哈const data e.dataTransfer?.getData(text); 这也是一些白板、Canvas-Editor、流程图 从外部拖拽上传实现的原理。 再次声明哈该API具有一定兼容性差异请查阅MDN后再决定使用生产同时请一定确保使用备用方案以实现功能的完整性。同时该文章仅表示本人应用过程实践可能存在遗漏、错误烦请指正赐教~
