HTML5拖拽文件到浏览器并实现文件上传下载功能代码

下面是具体的步骤和示例代码：

1. HTML代码

首先，在HTML中创建一个用于拖放的区域，用<div>或其他HTML元素包裹住：

<div id="drag-box">
  <p>将文件拖到此区域</p>
</div>

2. JavaScript代码

然后，通过JavaScript代码实现文件的拖放和上传下载功能：

var dragBox = document.getElementById("drag-box");
dragBox.addEventListener("dragover", function(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = "copy";
});

dragBox.addEventListener("drop", function(event) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  upload(files[0]); // 上传第一个文件
});

function upload(file) {
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  formData.append("file", file);
  xhr.open("POST", "/upload");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      download(xhr.responseText); // 下载服务器返回的文件
    }
  };
  xhr.send(formData);
}

function download(url) {
  var anchor = document.createElement("a");
  document.body.appendChild(anchor);
  anchor.style.display = "none";
  anchor.href = url;
  anchor.download = url.split("/").pop();
  anchor.click();
  document.body.removeChild(anchor);
}

代码说明：

1. 在拖放区域上注册dragover和drop事件，阻止默认行为并设置拖放效果为复制。
2. 在drop事件中获取拖放的文件，调用上传方法。
3. 上传方法通过XMLHttpRequest对象发送POST请求，将文件上传到服务器，并在响应后调用下载方法。
4. 下载方法通过创建一个隐藏的<a>标签，设置href属性为文件的URL，并模拟用户单击下载链接的操作。

示例1：上传图片并预览

<div id="drag-box">
  <p>将图片拖到此区域</p>
  <img id="thumbnail" src="" alt="">
</div>

var dragBox = document.getElementById("drag-box");
var thumbnail = document.getElementById("thumbnail");
dragBox.addEventListener("dragover", function(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = "copy";
});

dragBox.addEventListener("drop", function(event) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  var reader = new FileReader();
  reader.onload = function() {
    thumbnail.src = reader.result; // 显示预览图
    upload(files[0]);
  };
  reader.readAsDataURL(files[0]); // 读取文件内容
});

function upload(file) {
  /* 省略上传代码 */
}

示例2：上传Word文件并打开

function download(url) {
  window.open(url); // 直接在新窗口中打开
}

<div id="drag-box">
  <p>将Word文档拖到此区域</p>
</div>

var dragBox = document.getElementById("drag-box");
dragBox.addEventListener("dragover", function(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = "copy";
});

dragBox.addEventListener("drop", function(event) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  upload(files[0]);
});

function upload(file) {
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  formData.append("file", file);
  xhr.open("POST", "/upload");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      download(xhr.responseText); // 在新窗口中打开返回的URL
    }
  };
  xhr.send(formData);
}

以上就是“HTML5拖拽文件到浏览器并实现文件上传下载功能代码”的完整攻略，希望对你有所帮助。