如何在ASP.net MVC中从用户指定本地目录读取.DXF文件？

Great question—this is a common gotcha with web apps because of browser security restrictions, but there are a couple of solid approaches depending on your needs. Let’s break this down:

核心限制：为什么直接用本地路径不行 #

Browsers intentionally block direct access to local file system paths (like C:/Graphics) for security reasons—imagine if any website could read files from your hard drive without explicit permission! So you can’t just take a user-inputted path and use it to fetch files directly via JavaScript.

方案1：使用HTML5 File System API（纯Web方案，推荐） #

This approach lets users select a folder directly through the browser, and your app can read the DXF files inside it without uploading anything to the server. Here’s how to implement it:

1. 前端设置页面：让用户选择文件夹 #

Add an input element that allows folder selection, then save access to the folder (so users don’t have to re-select it every time):

<input type="file" id="folderSelector" webkitdirectory multiple />
<button id="saveFolderBtn">Save Folder Selection</button>

<script>
document.getElementById('saveFolderBtn').addEventListener('click', async () => {
  const folderInput = document.getElementById('folderSelector');
  if (folderInput.files.length === 0) return;

  // Get the selected folder handle
  const folderHandle = await window.showDirectoryPicker();
  
  // Request persistent access so we can reuse this later
  await folderHandle.requestPermission({ mode: 'read' });
  
  // Save the handle to localStorage for future visits
  localStorage.setItem('dxfFolderHandle', JSON.stringify(await folderHandle));
});
</script>

2. 读取文件夹中的DXF文件 #

On your graphics display page, retrieve the saved folder handle and read all .dxf files:

<canvas id="dxfCanvas"></canvas>

<script>
async function loadDxfFiles() {
  const savedHandle = localStorage.getItem('dxfFolderHandle');
  if (!savedHandle) {
    alert('Please set your DXF folder in the settings page first!');
    return;
  }

  // Restore the folder handle
  const folderHandle = await window.showDirectoryPicker({
    id: JSON.parse(savedHandle).id,
    mode: 'read'
  });

  // Iterate through files in the folder
  for await (const entry of folderHandle.values()) {
    if (entry.kind === 'file' && entry.name.endsWith('.dxf')) {
      const file = await entry.getFile();
      const fileContent = await file.text();
      
      // Parse and render the DXF content (use a library like dxf-parser)
      renderDxf(fileContent, document.getElementById('dxfCanvas'));
    }
  }
}

// Example render function (you'll need a DXF parsing library)
function renderDxf(dxfContent, canvas) {
  const parser = new DxfParser();
  const dxfData = parser.parseSync(dxfContent);
  
  // Add your rendering logic here (draw shapes to canvas/SVG)
  // ...
}

// Load files when the page loads
window.onload = loadDxfFiles;
</script>

3. ASP.NET MVC配合 #

Your MVC settings page just needs to serve the above HTML—you don’t need to store the folder path on the server, since everything happens client-side. If you want to sync the setting across devices, you could store the folder handle’s metadata in your database (but note that the handle is only valid for the same browser/device).

方案2：打包成桌面应用（如果必须支持手动路径输入） #

If you absolutely need users to type in a local path (like C:/Graphics), you’ll need to turn your web app into a desktop application. Tools like Electron let you wrap ASP.NET MVC apps with a Node.js runtime, which has full access to the local file system:

1. Set up an Electron app that loads your MVC app’s URL.
2. In the Electron main process, use Node.js’s fs module to read files from the user-specified path:

const fs = require('fs');
const path = require('path');

// Example: Read all DXF files from a user-inputted path
function readDxfFilesFromPath(userPath) {
  const dxfFiles = fs.readdirSync(userPath).filter(file => file.endsWith('.dxf'));
  
  dxfFiles.forEach(file => {
    const filePath = path.join(userPath, file);
    const fileContent = fs.readFileSync(filePath, 'utf8');
    
    // Send the content to the renderer process (your web app) to render
    mainWindow.webContents.send('dxf-file-content', fileContent);
  });
}

3. Your MVC app’s frontend can listen for the file content from Electron and render it using the same DXF parsing library as before.

关键注意事项 #

• Browser Compatibility: The File System Access API works best in Chrome, Edge, and Opera. Firefox supports it behind a flag.
• DXF Rendering: You’ll need a client-side library to parse and render DXF files—popular options include dxf-parser or cad-viewer.
• Security: Always validate that the files being read are indeed .DXF files to avoid potential issues.

内容的提问来源于stack exchange，提问作者PerrinPrograms