在 JavaScript 的 HTML 页面中显示 'fakepath' 文件

当我们在 HTML 页面中上传文件时，浏览器会自动将文件的完整路径显示为 'fakepath'，例如：

<input type="file" id="myFileInput">

当我们选中文件后，它会显示为：

C:\fakepath\myFile.jpg

这是出于安全考虑，浏览器不允许 JavaScript 直接访问本地文件系统的路径。但是，有时我们需要获取文件的实际路径，或者将文件路径显示在页面上。

以下是两种解决方案：

方案一：获取文件名

我们可以通过 JavaScript 获取到文件名，而无需访问其完整路径。示例代码如下：

const fileInput = document.getElementById('myFileInput');
const fileName = fileInput.files[0].name;
document.getElementById('fileName').textContent = `File: ${fileName}`;

HTML 代码：

<input type="file" id="myFileInput">
<p id="fileName"></p>

这段代码将在页面上显示选中文件的名称，例如：

File: myFile.jpg

方案二：手动上传文件

如果我们需要将文件路径显示在页面上，我们可以通过手动上传文件来实现。在 HTML 中添加一个隐藏的文件上传表单，然后通过 JavaScript 模拟点击上传按钮。示例代码如下：

const fileInput = document.getElementById('myFileInput');
const uploadBtn = document.getElementById('uploadBtn');

// 当选择文件时，更新上传按钮上的文件名
fileInput.addEventListener('change', () => {
  uploadBtn.textContent = fileInput.files[0].name;
});

// 模拟点击上传按钮
uploadBtn.addEventListener('click', () => {
  fileInput.click();
});

// 当选择文件后，手动上传
fileInput.addEventListener('input', () => {
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // TODO: 处理上传成功的情况
  })
  .catch(error => {
    // TODO: 处理上传失败的情况
  });
});

HTML 代码：

<form id="uploadForm" style="display:none">
  <input type="file" id="myFileInput">
</form>
<button id="uploadBtn">Upload File</button>

这段代码将在页面上显示一个上传按钮，当用户点击它时，会弹出文件选择框。选择文件后，点击确定按钮，文件路径将显示在上传按钮上，同时文件将被上传到服务器上。

以上就是在 JavaScript 的 HTML 页面中显示 'fakepath' 文件的两种解决方案。具体使用哪一种取决于你的需求，希望本文可以帮助你解决重要的问题。