【前端/js】使用js读取本地文件(xml、二进制)内容

说在前面

   

• 浏览器版本：Microsoft Edge 126.0.2 (正式版本) (64 位)
  

  FileReader

• MDN
  
• FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
  

DOMParser

• MDN
  
• DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。
  

文本文件

• 以xml文件为例
  
• vue
  1. <script setup>
  3. function btnClick() {
  4.   document.getElementById("file1").click()
  5. }
  7. function openFile(e) {
  8.   var file = e.target.files[0]
  9.   var reader = new FileReader()
  10.   reader.onload = function(e) {
  11.     var content = e.target.result
  12.     var parser = new DOMParser()
  13.     var xmlDoc = parser.parseFromString(content, "text/xml")
  14.     console.log(xmlDoc)
  15.   }
  16.   reader.readAsText(file)
  17. }
  18. </script>
  20. <template>
  21.   <button @click="btnClick">Open</button>
  22.   <input id="file1" type="file" style="display:none" @change="openFile">
  23. </template>

  复制代码
• 结果
  
  
  
  

二进制文件

• 以navmesh为例
  1. <script setup>
  2. import * as THREE from 'three';
  3. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  4. import {
  5.   init as initRecastNavigation,
  6.   NavMeshQuery,
  7. } from '@recast-navigation/core';
  8. import { generateSoloNavMesh } from '@recast-navigation/generators';
  9. import { DebugDrawer, getPositionsAndIndices } from '@recast-navigation/three';
  10. import { exportNavMesh, importNavMesh } from 'recast-navigation';
  12. // initialise recast-navigation
  13. initRecastNavigation();
  15. // setup scene
  16. const renderer = new THREE.WebGLRenderer();
  17. document.body.appendChild(renderer.domElement);
  19. const scene = new THREE.Scene();
  20. const camera = new THREE.PerspectiveCamera();
  21. camera.position.set(10, 10, -10);
  23. const orbitControls = new OrbitControls(camera, renderer.domElement);
  25. // handle resizing
  26. const onWindowResize = () => {
  27.   camera.aspect = window.innerWidth / window.innerHeight;
  28.   camera.updateProjectionMatrix();
  29.   renderer.setSize(window.innerWidth, window.innerHeight);
  30. };
  31. onWindowResize();
  33. window.addEventListener('resize', onWindowResize);
  35. // animate
  36. const animate = () => {
  37.   requestAnimationFrame(animate);
  38.   renderer.render(scene, camera);
  39. };
  41. animate();
  43. function btnClick() {
  44.   document.getElementById('file1').click();
  45. }
  47. function openBinFile(e) {
  48.   var file = e.target.files[0];
  49.   var reader = new FileReader();
  50.   reader.onload = function (e) {
  51.     var content = new Uint8Array(e.target.result);
  52.     const { navMesh } = importNavMesh(content);
  53.     const debugDrawer = new DebugDrawer();
  54.     debugDrawer.drawNavMesh(navMesh);
  55.     scene.add(debugDrawer);
  56.     console.log(content);
  57.   };
  58.   reader.readAsArrayBuffer(file);
  59. }
  60. </script>
  62. <template>
  63.   <button @click="btnClick">Open</button>
  64.   <input id="file1" type="file" style="display: none" @change="openBinFile" />
  65. </template>

  复制代码
• 结果
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。