当前位置：首页 > JavaScript

js超链接实现文件上传

2026-03-01 21:39:55JavaScript

使用HTML和JavaScript实现文件上传超链接

创建一个自定义样式的超链接，通过隐藏的<input type="file">元素触发文件选择对话框：

<a href="#" id="uploadLink">点击上传文件</a>
<input type="file" id="fileInput" style="display: none;" />

<script>
  document.getElementById('uploadLink').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('fileInput').click();
  });

  document.getElementById('fileInput').addEventListener('change', function() {
    if (this.files.length > 0) {
      const file = this.files[0];
      console.log('已选择文件:', file.name);
      // 这里可以添加文件上传逻辑
    }
  });
</script>

使用FormData实现AJAX文件上传

选择文件后通过AJAX发送到服务器：

document.getElementById('fileInput').addEventListener('change', function() {
  if (this.files.length > 0) {
    const formData = new FormData();
    formData.append('file', this.files[0]);

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
    })
    .catch(error => {
      console.error('上传失败:', error);
    });
  }
});

添加拖放文件上传功能

增强用户体验，允许拖放文件到超链接区域：

<a href="#" id="dropArea" 
   style="border: 2px dashed #ccc; padding: 20px; display: inline-block;">
   点击或拖放文件到这里上传
</a>
<input type="file" id="fileInput" style="display: none;" />

<script>
  const dropArea = document.getElementById('dropArea');

  // 防止默认拖放行为
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  // 高亮显示拖放区域
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    dropArea.style.borderColor = '#06f';
  }

  function unhighlight() {
    dropArea.style.borderColor = '#ccc';
  }

  // 处理拖放文件
  dropArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;

    if (files.length > 0) {
      // 这里可以调用之前的上传逻辑
      console.log('拖放文件:', files[0].name);
    }
  }
</script>

显示上传进度

使用XMLHttpRequest显示上传进度：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);

  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      console.log('上传进度:', Math.round(percentComplete) + '%');
    }
  }, false);

  xhr.addEventListener('load', function() {
    console.log('上传完成');
  });

  xhr.addEventListener('error', function() {
    console.error('上传出错');
  });

  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}

添加文件类型和大小限制

在文件选择时添加验证：

document.getElementById('fileInput').addEventListener('change', function() {
  if (this.files.length > 0) {
    const file = this.files[0];
    const validTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    const maxSize = 5 * 1024 * 1024; // 5MB

    if (!validTypes.includes(file.type)) {
      alert('只支持JPEG, PNG和PDF文件');
      return;
    }

    if (file.size > maxSize) {
      alert('文件大小不能超过5MB');
      return;
    }

    // 验证通过后上传
    uploadWithProgress(file);
  }
});

这些方法提供了从基础到进阶的文件上传实现方式，可以根据实际需求选择或组合使用。

js超链接实现文件上传