原生js怎么获取上传的文件名

原生JS获取上传的文件名可以通过以下方式：使用input元素的files属性、监听change事件、读取File对象的name属性。具体来说，可以通过监听文件输入框的change事件来获取文件对象，然后访问该对象的name属性来获取文件名。举个例子，假设你有一个文件输入框，当用户选择文件时，可以通过JavaScript代码来获取所选文件的文件名：

<input type="file" id="fileInput">
<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    if (files.length > 0) {
      console.log('Selected file:', files[0].name);
    }
  });
</script>

通过这种方式，可以有效地获取用户上传的文件名，并进行相应的处理。

一、使用文件输入框

文件输入框是HTML中最常用的方式之一，能够方便地让用户选择文件并上传。在HTML中，可以使用<input type="file">标签来创建一个文件输入框。以下是一个简单的例子：

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

当用户选择文件后，可以通过JavaScript来获取文件名。具体来说，使用input元素的files属性，该属性是一个FileList对象，包含用户所选的文件。每个文件都是一个File对象，我们可以访问其name属性来获取文件名。

document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  if (files.length > 0) {
    const fileName = files[0].name;
    console.log('Selected file:', fileName);
  }
});

上述代码中，我们通过监听change事件来获取文件对象，并输出文件名。

二、处理多个文件上传

在某些情况下，用户可能需要一次上传多个文件。HTML文件输入框支持多文件选择，只需在<input>标签中添加multiple属性即可：

<input type="file" id="fileInput" multiple>

在JavaScript中，处理多个文件上传与单个文件类似，只是需要遍历FileList对象中的每个文件：

document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    console.log('Selected file:', files[i].name);
  }
});

通过遍历files数组，可以输出所有选中文件的文件名。

三、在表单中处理文件上传

在实际项目中，文件上传通常是表单的一部分。可以使用<form>标签将文件输入框和其他表单字段组合在一起：

<form id="uploadForm">
  <input type="file" id="fileInput" name="files" multiple>
  <input type="submit" value="Upload">
</form>

在JavaScript中，可以通过监听表单的submit事件来处理文件上传：

document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const files = document.getElementById('fileInput').files;
  for (let i = 0; i < files.length; i++) {
    console.log('Selected file:', files[i].name);
  }
  // 可以在此处添加代码将文件上传到服务器
});

通过阻止表单的默认提交行为，我们可以在提交表单时获取文件名，并在必要时执行其他操作。

四、使用AJAX进行文件上传

在现代Web开发中，使用AJAX进行文件上传是常见的做法。这种方式无需刷新页面即可将文件上传到服务器。可以使用XMLHttpRequest对象或fetch API来实现AJAX文件上传。

以下是使用XMLHttpRequest对象进行文件上传的示例：

document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const files = document.getElementById('fileInput').files;
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]);
  }
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('Files uploaded successfully');
    } else {
      console.error('File upload failed');
    }
  };
  xhr.send(formData);
});

在上述代码中，我们创建了一个FormData对象，并将所有选中文件添加到该对象中。然后，通过XMLHttpRequest对象将FormData对象发送到服务器。

五、显示文件名给用户

在用户选择文件后，通常需要将文件名显示给用户，以便确认所选文件。可以通过操作DOM元素来实现这一点。

以下是一个简单的示例，当用户选择文件后，将文件名显示在页面上：

<input type="file" id="fileInput" multiple>
<ul id="fileList"></ul>
<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    const fileList = document.getElementById('fileList');
    fileList.innerHTML = ''; // 清空之前的文件列表
    for (let i = 0; i < files.length; i++) {
      const li = document.createElement('li');
      li.textContent = files[i].name;
      fileList.appendChild(li);
    }
  });
</script>

通过动态创建<li>元素，并将其添加到<ul>列表中，可以将文件名显示在页面上。

六、文件上传的安全性考虑

在处理文件上传时，安全性是一个重要的考虑因素。文件上传可能带来潜在的安全风险，如恶意文件、文件大小超限等。以下是一些安全性建议：

文件类型验证：在客户端和服务器端都应验证文件类型，确保只允许上传特定类型的文件。例如，只允许上传图片、文档等。

document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  for (let i = 0; i < files.length; i++) {
    if (!allowedTypes.includes(files[i].type)) {
      alert('Invalid file type: ' + files[i].name);
      return;
    }
  }
});

文件大小限制：在客户端和服务器端都应限制文件大小，防止用户上传过大的文件。

document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  const maxSize = 5 * 1024 * 1024; // 5MB
  for (let i = 0; i < files.length; i++) {
    if (files[i].size > maxSize) {
      alert('File too large: ' + files[i].name);
      return;
    }
  }
});

文件名安全：文件名可能包含特殊字符，需对其进行处理，防止路径穿越等攻击。可以在服务器端对文件名进行清理和规范化处理。
存储位置：将上传的文件存储在安全的目录中，避免与Web根目录混淆。可以使用随机生成的文件名，防止文件名冲突。

七、使用研发项目管理系统和通用项目协作软件

在团队协作和项目管理中，使用专业的项目管理系统和协作软件能够提高效率、简化流程。推荐使用以下两个系统：

研发项目管理系统PingCode：PingCode是一款专为研发团队设计的项目管理系统，提供了丰富的功能，如需求管理、任务管理、缺陷跟踪、版本控制等。通过PingCode，可以高效地管理项目进度、协作开发、跟踪问题，确保项目按时交付。
通用项目协作软件Worktile：Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。Worktile提供了任务管理、文件共享、团队沟通等功能，能够帮助团队成员高效协作、共享信息、跟踪任务进展。

使用这些专业的工具，可以显著提升项目管理和团队协作的效率，确保项目顺利推进。

八、总结

通过本文，我们详细介绍了如何使用原生JavaScript获取上传的文件名，并讨论了文件输入框的使用、处理多个文件上传、在表单中处理文件上传、使用AJAX进行文件上传、显示文件名给用户、文件上传的安全性考虑等方面的内容。此外，还推荐了两个专业的项目管理和协作软件：研发项目管理系统PingCode和通用项目协作软件Worktile。

希望通过这些内容，能够帮助你更好地理解和实现文件上传的相关功能，并提升项目管理和团队协作的效率。

相关问答FAQs：

1. 如何使用原生JS获取上传文件的文件名？

要获取上传文件的文件名，可以通过以下步骤使用原生JS实现：

首先，获取文件上传输入框的引用，可以使用document.getElementById或document.querySelector方法。
其次，添加一个事件监听器，监听文件上传框的change事件。
在事件监听器中，通过event.target.files[0]来访问所选文件的文件对象。
最后，使用文件对象的name属性获取文件名。

示例代码如下：

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

fileInput.addEventListener('change', function(event) {
  const uploadedFile = event.target.files[0];
  const fileName = uploadedFile.name;
  console.log(fileName);
});

注意：上述代码中的fileInput是一个文件上传的input元素，你需要根据实际情况修改为对应的元素ID或选择器。

2. 在原生JS中，如何获取用户上传的文件名？

如果你想要获取用户上传的文件名，可以按照以下步骤使用原生JS实现：

首先，通过document.querySelector或document.getElementById方法获取文件上传输入框的引用。
其次，为文件上传输入框添加一个事件监听器，监听其change事件。
在事件监听器中，通过event.target.files[0]来获取用户选择的文件对象。
最后，使用文件对象的name属性获取文件名。

下面是一个示例代码：

const fileInput = document.querySelector('#fileInput');

fileInput.addEventListener('change', function(event) {
  const uploadedFile = event.target.files[0];
  const fileName = uploadedFile.name;
  console.log(fileName);
});

请注意，上述代码中的fileInput是一个文件上传的input元素，你需要根据实际情况修改为对应的元素ID或选择器。

3. 如何使用原生JavaScript获取上传文件的文件名？

要获取上传文件的文件名，可以按照以下步骤使用原生JavaScript实现：

首先，获取文件上传输入框的引用，可以使用document.getElementById或document.querySelector方法。
其次，为文件上传输入框添加一个事件监听器，监听其change事件。
在事件监听器中，通过event.target.files[0]来获取所选文件的文件对象。
最后，使用文件对象的name属性获取文件名。

以下是示例代码：

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

fileInput.addEventListener('change', function(event) {
  const uploadedFile = event.target.files[0];
  const fileName = uploadedFile.name;
  console.log(fileName);
});

请注意，上述代码中的fileInput是一个文件上传的input元素，你需要根据实际情况修改为对应的元素ID。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3678486