JavaScript获取上传文件真实文件名的方法详解

在Web开发中，文件上传是常见需求，但有时我们需要获取文件的真实名称而非临时路径名。本文将详细介绍JavaScript中获取上传文件真实文件名的几种方法。

1. 通过input元素的files属性获取

这是最常用的方法，通过HTML5的File API实现：

document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  var fileName = file.name;
  console.log('真实文件名：', fileName);
});

2. 处理多文件上传情况

当input元素设置multiple属性时，可以这样处理多个文件：

document.getElementById('multiFileInput').addEventListener('change', function(e) {
  var files = e.target.files;
  for(var i = 0; i < files.length; i++) {
    console.log('文件' + (i+1) + '名称：', files[i].name);
  }
});

3. 兼容性处理

对于不支持File API的老版本浏览器，可以使用value属性：

var fileName = document.getElementById('fileInput').value;
// 移除路径部分
fileName = fileName.replace(/^.*\\/, '');

4. 安全注意事项

获取文件名时需要注意：

• 不要直接使用用户提供的文件名保存到服务器
• 对文件名进行验证和过滤
• 考虑文件名编码问题

5. 实际应用示例

完整的文件上传表单处理示例：

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  if(!file) {
    alert('请选择文件');
    return;
  }
  
  console.log('上传文件信息：');
  console.log('名称：', file.name);
  console.log('大小：', file.size);
  console.log('类型：', file.type);
  
  // 这里可以添加文件上传逻辑
});