javascript实现文件拖拽事件

下面是javascript实现文件拖拽事件的完整攻略：

1. 拖拽事件的基本概念

拖拽事件是指在网页中，用户可以通过鼠标拖拽文件或者文本等内容，实现移动、复制或者上传等操作。常见的拖拽事件有三种：

• dragstart：拖拽开始时触发。
• dragover：当被拖拽的元素在目标元素上方移动时触发。
• drop：当被拖拽的元素被放置到目标元素上时触发。

在拖拽事件中，需要设置dragstart事件的dataTransfer属性，将拖拽的数据存储在该属性中，然后在drop事件中获取该数据，并进行相应的操作。

2. 文件拖拽事件的实现

文件拖拽事件是指用户可以通过鼠标拖拽文件到网页中，实现文件上传等操作。下面是文件拖拽事件常用的代码实现：

HTML代码

<div id="dropArea">将文件拖拽到这里</div>

JS代码

var dropArea = document.getElementById('dropArea');

// 阻止浏览器默认事件
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

// 防止浏览器默认行为
function preventDefaults (e) {
  e.preventDefault();
  e.stopPropagation();
}

// 当拖拽文件进入区域时，修改区域样式
dropArea.addEventListener('dragenter', highlight, false);
// 当拖拽文件离开区域时，还原区域样式
dropArea.addEventListener('dragleave', unhighlight, false);
// 当拖拽文件在区域中移动时，阻止浏览器默认行为
dropArea.addEventListener('dragover', preventDefaults, false);
// 当用户放置文件到区域时，处理文件上传
dropArea.addEventListener('drop', handleDrop, false);

// 当拖拽文件进入区域时，修改区域样式
function highlight (e) {
  dropArea.classList.add('highlight');
}

// 当拖拽文件离开区域时，还原区域样式
function unhighlight (e) {
  dropArea.classList.remove('highlight');
}

// 处理文件上传
function handleDrop (e) {
  var files = e.dataTransfer.files;
  // 进行文件上传等操作
}

上述代码中，通过addEventListener方法向拖拽区域添加各种拖拽事件的监听器，阻止浏览器默认行为，同时修改拖拽区域的样式以提示用户。当用户上传文件时，可以通过e.dataTransfer.files获取拖拽的文件，进一步进行文件上传或其他操作。

3. 示例代码

下面是两个示例代码，供参考：

示例一：基本文件上传

<div id="dropArea">将文件拖拽到这里</div>

<!-- 显示上传结果 -->
<p id="result"></p>

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

// 阻止浏览器默认事件
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

// 防止浏览器默认行为
function preventDefaults (e) {
  e.preventDefault();
  e.stopPropagation();
}

// 当拖拽文件进入区域时，修改区域样式
dropArea.addEventListener('dragenter', highlight, false);
// 当拖拽文件离开区域时，还原区域样式
dropArea.addEventListener('dragleave', unhighlight, false);
// 当拖拽文件在区域中移动时，阻止浏览器默认行为
dropArea.addEventListener('dragover', preventDefaults, false);
// 当用户放置文件到区域时，处理文件上传
dropArea.addEventListener('drop', handleDrop, false);

// 当拖拽文件进入区域时，修改区域样式
function highlight (e) {
  dropArea.classList.add('highlight');
}

// 当拖拽文件离开区域时，还原区域样式
function unhighlight (e) {
  dropArea.classList.remove('highlight');
}

// 处理文件上传
function handleDrop (e) {
  var files = e.dataTransfer.files;
  var formData = new FormData();

  // 循环遍历所有上传文件
  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // 添加文件到formData中
    formData.append('files', file);
  }

  // 发送POST请求，上传文件
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() {
    if (xhr.status === 200) {
      result.innerText = '文件上传成功';
    } else {
      result.innerText = '文件上传失败';
    }
  };
  xhr.send(formData);
}
</script>

示例二：文件预览和上传

<div id="dropArea">将文件拖拽到这里</div>

<!-- 文件预览 -->
<div id="preview"></div>

<!-- 显示上传结果 -->
<p id="result"></p>

<script>
var dropArea = document.getElementById('dropArea');
var preview = document.getElementById('preview');
var result = document.getElementById('result');

// 阻止浏览器默认事件
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

// 防止浏览器默认行为
function preventDefaults (e) {
  e.preventDefault();
  e.stopPropagation();
}

// 当拖拽文件进入区域时，修改区域样式
dropArea.addEventListener('dragenter', highlight, false);
// 当拖拽文件离开区域时，还原区域样式
dropArea.addEventListener('dragleave', unhighlight, false);
// 当拖拽文件在区域中移动时，阻止浏览器默认行为
dropArea.addEventListener('dragover', preventDefaults, false);
// 当用户放置文件到区域时，处理文件上传
dropArea.addEventListener('drop', handleDrop, false);

// 当拖拽文件进入区域时，修改区域样式
function highlight (e) {
  dropArea.classList.add('highlight');
}

// 当拖拽文件离开区域时，还原区域样式
function unhighlight (e) {
  dropArea.classList.remove('highlight');
}

// 处理文件上传
function handleDrop (e) {
  var files = e.dataTransfer.files;

  // 循环遍历所有上传文件
  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // 创建FileReader实例，用于读取文件内容
    var reader = new FileReader();

    // 读取文件内容并进行预览
    reader.onload = function (e) {
      var img = document.createElement('img');
      // 获取预览图片的base64编码，用于上传
      var base64 = e.target.result;
      // 设置预览图片的src属性，显示预览图片
      img.src = base64;
      preview.appendChild(img);

      // 创建新的FormData实例，用于上传文件
      var formData = new FormData();
      // 添加上传文件到formData对象中
      formData.append('file', file, file.name);

      // 发送POST请求，上传文件
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');
      xhr.onload = function() {
        if (xhr.status === 200) {
          result.innerText = '文件上传成功';
        } else {
          result.innerText = '文件上传失败';
        }
      };
      xhr.send(formData);
    }

    // 开始读取文件内容，并触发onload事件
    reader.readAsDataURL(file);
  }
}
</script>

这两个示例代码中，都演示了如何通过拖拽方式上传文件。第一个示例是简单的文件上传，第二个示例则包括了文件预览和上传两个步骤。