jquery 拖拽上传文件

原创

mob649e81540090 2023-07-30 07:20:11 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81540090的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery拖拽上传文件的步骤

1. 创建一个可拖拽区域

首先，我们需要在页面上创建一个可拖拽区域，用于用户拖拽文件进行上传。我们可以使用HTML和CSS来创建这个区域。

<div id="drag-drop-area">将文件拖拽到此区域</div>

#drag-drop-area {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
}

上面的代码创建了一个宽度为300px，高度为200px的可拖拽区域，样式为虚线边框的灰色区域。

2. 初始化拖拽上传功能

接下来，我们需要使用jQuery来初始化拖拽上传功能。我们可以使用dragenter、dragover和drop事件来实现这个功能。

$(document).ready(function() {
  // 初始化拖拽上传功能
  $('#drag-drop-area').on('dragenter', function (event) {
    event.preventDefault();
    $(this).addClass('dragover');
  }).on('dragover', function (event) {
    event.preventDefault();
  }).on('drop', function (event) {
    event.preventDefault();
    $(this).removeClass('dragover');
    
    // 处理上传文件
    handleDrop(event.originalEvent.dataTransfer.files);
  });
});

上面的代码使用dragenter事件来添加一个类名dragover，表示鼠标进入可拖拽区域。使用dragover事件来阻止默认行为，即禁止浏览器打开文件的默认行为。使用drop事件来移除类名dragover，表示鼠标离开可拖拽区域，并调用handleDrop函数来处理上传的文件。

3. 处理上传文件

当用户拖拽文件到可拖拽区域后，我们需要处理上传的文件。我们可以使用FormData对象和AJAX来实现文件上传。

function handleDrop(files) {
  var formData = new FormData();
  
  // 将文件添加到FormData对象中
  for (var i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }
  
  // 发送文件上传请求
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function(response) {
      // 文件上传成功的处理逻辑
      console.log(response);
    },
    error: function(xhr, status, error) {
      // 文件上传失败的处理逻辑
      console.error(error);
    }
  });
}

上面的代码创建了一个FormData对象，并将上传的文件添加到其中。然后，使用AJAX发送文件上传请求，将FormData对象作为data参数传递给$.ajax函数。在success回调函数中，可以处理文件上传成功的逻辑，例如显示上传成功的消息或者刷新页面。在error回调函数中，可以处理文件上传失败的逻辑，例如显示上传失败的消息或者记录错误日志。