百度自助建站官网,网站开发需要掌握技术,html 5网站欣赏,网页设计网页制作本文首发于公众号#xff1a;符合预期的CoyPan写在前面最新版的Chrome(Chrome 83, 须要开启权限)支持直接读写本地文件了。javascript开启方法#xff1a;Chrome浏览器升级到83版本以上#xff1b;访问chrome://flags/#xff0c;开启 Native File System API 选项当前如何…本文首发于公众号符合预期的CoyPan写在前面最新版的Chrome(Chrome 83, 须要开启权限)支持直接读写本地文件了。javascript开启方法Chrome浏览器升级到83版本以上访问chrome://flags/开启 Native File System API 选项当前如何读写本地文件目前最多见的读取本地文件方法html一、使用input标签获取文件File对象。java二、使用FileReader读取文件。webvar reader new FileReader();reader.onload function (event) {// event.target.result就是读取的内容...};// 这里的file为File对象实例reader.readAsText(file);// reader.readAsDataURL(file);// reader.readAsArrayBuffer(file);写文件方法chrome很遗憾如今没有直接写文件到本地的方法。不过大概能够用下面的方法来实现apivar textFileAsBlob new Blob([hello word], {type:text/plain});var downloadLink document.createElement(a);downloadLink.download test.txt;downloadLink.href window.URL.createObjectURL(textFileAsBlob);downloadLink.click();最新的Chrome浏览器下如何读写文件读文件浏览器使用window.chooseFileSystemEntries这个api。须要注意的是调用这个api必须由用户的操做触发好比点击等。app// 文件句柄let fileHandle;button.addEventListener(click, async (e) {fileHandle await window.chooseFileSystemEntries();console.log(fileHandle);});调用api后会弹出文件窗口用户选择文件后就能够拿到文件的句柄了。async接着调用句柄的方法就能够拿到文件内容了。spalet fileHandle;button.addEventListener(click, async (e) {fileHandle await window.chooseFileSystemEntries();const file await globalFileHandle.getFile();const contents await file.text(); // 这里的方法还有slice(), stream(), arrayBuffer()});写文件写文件分红两种状况一种是直接写入原文件一种是写入一个新文件。写入原文件咱们只须要拿到原文件的句柄调用句柄的方法就能够了。const writable await fileHandle.createWritable();await writable.write(new content);await writable.close();写入新文件首先须要新建一个文件依然是调用window.chooseFileSystemEntries这个api不过此次须要传入一些参数。button.addEventListener(click, async function() {const opts {type: save-file,accepts: [{description: Text file,extensions: [txt],mimeTypes: [text/plain],}]};// 新建文件的句柄const fileHandle await window.chooseFileSystemEntries(opts);...});接着再按照前文的方法写入内容便可。示例Demo新的文件Api十分方便。我简单写了一个demo在浏览器编辑本地文件。Demo体验地址和代码在这里(请使用最新版的桌面Chrome浏览器访问且开启文件读写权限)写在后面Chrome这一波更新你怎么看web app web os
