h5实现文件上传

H5实现文件上传的方法

在HTML5中，可以通过<input type="file">元素结合JavaScript实现文件上传功能。以下是具体实现方式：

基本文件上传实现

创建文件输入框并监听change事件：

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

多文件上传

添加multiple属性允许选择多个文件：

<input type="file" id="fileInput" multiple>
<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const files = e.target.files;
    for (let i = 0; i < files.length; i++) {
      console.log('File ' + (i+1) + ':', files[i].name);
    }
  });
</script>

文件上传到服务器

使用FormData对象和XMLHttpRequest或fetch API上传文件：

<input type="file" id="fileInput">
<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Error:', error));
  });
</script>

显示上传进度

XMLHttpRequest提供进度事件：

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete + '%');
  }
});
xhr.open('POST', '/upload', true);
xhr.send(formData);

文件类型限制

使用accept属性限制文件类型：

<input type="file" accept=".jpg,.jpeg,.png,.pdf">

拖拽上传实现

实现拖放区域：

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
  拖放文件到这里
</div>
<script>
  const dropArea = document.getElementById('dropArea');

  dropArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    dropArea.style.borderColor = 'blue';
  });

  dropArea.addEventListener('drop', function(e) {
    e.preventDefault();
    dropArea.style.borderColor = '#ccc';
    const files = e.dataTransfer.files;
    console.log('Dropped files:', files);
  });
</script>

文件预览功能

在客户端预览图片文件：

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

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  if (file.type.match('image.*')) {
    const reader = new FileReader();
    reader.onload = function(e) {
      preview.src = e.target.result;
    }
    reader.readAsDataURL(file);
  }
});

这些方法涵盖了H5文件上传的基本功能，可以根据实际需求进行组合和扩展。