如何仅用纯JavaScript获取单个浏览文件的名称、格式及内容

我来帮你梳理一下实现步骤，完全用原生JS搞定，不用jQuery也不依赖额外框架，同时满足你单文件处理的需求：

先修正你代码里的小问题 #

你原来的JS代码里有个拼写错误：document.getElemtById 应该是 document.getElementById，这个小错误会导致你获取不到文件输入元素，先改过来。

完整实现方案 #

我们分三步来做：监听文件选择、读取文件信息与内容、点击按钮提交数据到REST服务。

完整代码 #

HTML（保持你原来的结构就行）

<button class="ebBtn" id="importButt" name="importButt"><span>Import ASN1</span></button>
<input type="file" id="myfile" name="myfile">
<p id="contents"></p>

JavaScript（纯原生实现）

// 全局变量暂存文件信息和内容
let targetFile = null;
let fileTextContent = "";

// 获取页面元素
const fileInput = document.getElementById('myfile');
const importButton = document.getElementById('importButt');
const contentDisplay = document.getElementById('contents');

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
  // 只取第一个选中的文件，满足单文件需求
  targetFile = e.target.files[0];
  if (!targetFile) {
    contentDisplay.textContent = "";
    return;
  }

  // 提取文件名和格式（扩展名）
  const fileName = targetFile.name;
  const fileFormat = fileName.split('.').pop().toLowerCase();
  console.log(`选中文件：${fileName}，格式：${fileFormat}`);

  // 读取文件内容
  const reader = new FileReader();
  reader.onload = function(event) {
    fileTextContent = event.target.result;
    // 把内容显示到页面上
    contentDisplay.textContent = fileTextContent;
    console.log('文件内容已读取完成');
  };
  // 以文本形式读取，如果你需要处理二进制文件可以换成readAsArrayBuffer
  reader.readAsText(targetFile);
});

// 监听导入按钮点击，发送POST请求
importButton.addEventListener('click', function() {
  // 先检查是否已选择文件并读取内容
  if (!targetFile || !fileTextContent) {
    alert('请先选择一个文件并等待内容加载完成');
    return;
  }

  // 准备要提交的数据
  const postData = {
    fileName: targetFile.name,
    fileFormat: targetFile.name.split('.').pop().toLowerCase(),
    content: fileTextContent
  };

  // 用原生XMLHttpRequest发送POST请求
  const xhr = new XMLHttpRequest();
  // 这里替换成你的REST服务实际地址
  xhr.open('POST', 'https://your-rest-api-endpoint.com/import-asn1', true);
  // 根据后端要求设置请求头，比如JSON格式就设置Content-Type
  xhr.setRequestHeader('Content-Type', 'application/json');

  // 请求成功回调
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('数据提交成功！响应：', xhr.responseText);
      alert('ASN1文件导入成功');
    } else {
      console.error('提交失败，状态码：', xhr.status);
      alert('导入失败，请检查服务连接或文件内容');
    }
  };

  // 网络错误回调
  xhr.onerror = function() {
    console.error('网络请求出错');
    alert('网络连接异常，请稍后重试');
  };

  // 把数据转为JSON字符串发送
  xhr.send(JSON.stringify(postData));
});

关键细节说明 #

• 单文件处理：我们只取files[0]，确保不管用户选了多少文件，都只处理第一个，完全符合你的需求。
• 文件信息获取：
  • 文件名直接通过targetFile.name获取
  • 文件格式（扩展名）通过拆分文件名最后一段得到，转成小写方便统一判断
• 文件内容读取：这里用了FileReader，它是浏览器原生的JS API（属于HTML5标准，但这是纯JS实现读取本地文件的唯一方式，不属于第三方库，完全符合你的要求）。
• POST请求：用原生XMLHttpRequest发送请求，没有依赖任何框架，纯JS实现。你需要把代码里的服务地址换成你实际的REST接口地址，同时根据后端要求调整请求头和数据格式（比如如果后端接受form-data，你可以用FormData来构建请求体）。

注意事项 #

• 如果你的前端页面和REST服务不在同一域名下，需要确保服务端配置了CORS跨域允许，否则会出现跨域错误。
• 如果需要处理非文本格式的ASN1文件，可以把readAsText换成readAsArrayBuffer，然后根据需要处理二进制数据。

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