JS实现的文件拖拽上传功能示例

JS实现的文件拖拽上传功能可以让用户通过拖拽文件到页面上的区域来上传文件，而不用手动选择文件上传。下面是实现文件拖拽上传功能的完整攻略：

步骤1：为文件拖拽区域添加事件监听器

需要为文件拖拽区域添加以下3个事件监听器：

1. dragenter：当拖拽文件进入文件拖拽区域时触发，此时需要对文件拖拽区域的样式进行修改。

2. dragover：当鼠标在文件拖拽区域内移动时触发，需要阻止默认行为，即防止浏览器直接打开文件。

3. drop：当拖拽文件放置在文件拖拽区域内时触发，需要获取文件对象并进行上传。

以下是示例代码：

var dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragenter', preventDefaults, false);
dropArea.addEventListener('dragover', preventDefaults, false);
dropArea.addEventListener('drop', handleDrop, false);

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

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

  handleFiles(files);
}

步骤2：处理文件对象

当拖拽文件放置在文件拖拽区域内时，需要获取文件对象并进行上传。以下是处理文件对象的示例代码：

function handleFiles(files) {
  ([...files]).forEach(uploadFile)
}

function uploadFile(file) {
  var url = 'https://example.com/upload'; // 上传的地址

  var formData = new FormData();
  formData.append('file', file);

  fetch(url, {
    method: 'POST',
    body: formData
  })
  .then(() => { console.log('上传成功！') })
  .catch(() => { console.log('上传失败！') });
}

示例1：添加进度条

可以在文件上传的过程中添加一个进度条来显示上传进度。以下是添加进度条的示例代码：

function uploadFile(file) {
  var url = 'https://example.com/upload';

  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);

  xhr.upload.addEventListener("progress", function(e) {
    var percentComplete = (e.loaded / e.total)*100;
    console.log(percentComplete.toFixed(2) + '%');
  });

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log('上传成功！');
    }
  };

  xhr.send(formData);
}

示例2：限制上传文件类型和大小

可以通过文件对象的属性限制上传文件的类型和大小。以下是限制上传文件类型和大小的示例代码：

function handleFiles(files) {
  ([...files]).forEach(uploadFile)
}

function uploadFile(file) {
  if (!file.type.match('image.*')) {
    console.log('只能上传图片！');
    return;
  }

  if (file.size > 1000000) {
    console.log('上传文件不能大于1MB！');
    return;
  }

  var url = 'https://example.com/upload';
  var formData = new FormData();
  formData.append('file', file);

  fetch(url, {
    method: 'POST',
    body: formData
  })
  .then(() => { console.log('上传成功！') })
  .catch(() => { console.log('上传失败！') });
}

以上就是JS实现的文件拖拽上传功能的完整攻略，其中包含了两条示例：添加进度条和限制上传文件类型和大小。