JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

要实现JS文件/图片从电脑里面拖拽到浏览器上传文件/图片的功能，可以通过以下步骤进行：

1. HTML结构中添加拖拽区域

首先，在HTML结构中添加一个拖拽区域，可以使用<div>、<section>等元素，给其设置一个ID或类名，如下所示：

<div id="drag-area">
  <p>请将文件或图片拖拽到这里进行上传</p>
</div>

1. 绑定拖拽事件

在JavaScript中，为拖拽区域绑定相关事件，包括dragenter、dragover、dragleave和drop。其中，前三个事件（dragenter、dragover和dragleave）在拖拽文件/图片进入、悬停和离开时触发，而drop事件则是文件/图片被释放到拖拽区域时触发。为了实现拖拽上传文件/图片的功能，我们要取消浏览器默认的文件拖拽行为，替换为自定义的拖拽行为。完整的代码可以参考下面的示例：

var dragArea = document.getElementById('drag-area');

// 防止浏览器默认行为
dragArea.addEventListener('dragenter', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragover', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragleave', function(e) {
  e.preventDefault();
});

// 拖拽释放
dragArea.addEventListener('drop', function(e) {
  e.preventDefault();
  var files = e.dataTransfer.files;
  // TODO: 处理上传逻辑
});

在上述代码中，e.preventDefault()函数用于取消浏览器默认的文件拖拽行为，并在drop事件中获取拖拽释放的文件，以便后续上传处理。

1. 处理上传逻辑

最后，我们需要编写上传逻辑，将拖拽释放的文件/图片上传到指定的服务器。上传的方式有多种，可以使用XMLHttpRequest（XHR）对象、FormData对象或者通过WebSocket等方式。具体示例可以参考以下两个案例：

（1）使用XHR对象上传文件：

var dragArea = document.getElementById('drag-area');

// 防止浏览器默认行为
dragArea.addEventListener('dragenter', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragover', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragleave', function(e) {
  e.preventDefault();
});

// 拖拽释放
dragArea.addEventListener('drop', function(e) {
  e.preventDefault();
  var files = e.dataTransfer.files;
  var formData = new FormData();

  for (var i = 0; i < files.length; i++) {
    formData.append('file', files[i]); // 上传文件
  }

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

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

  xhr.send(formData);
});

上述代码使用了XMLHttpRequest（XHR）对象，将拖拽释放的文件上传到指定的服务器，并在上传成功后输出提示信息。

（2）使用WebSocket上传文件：

var dragArea = document.getElementById('drag-area');
var socket = new WebSocket('ws://localhost:8080');

// 防止浏览器默认行为
dragArea.addEventListener('dragenter', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragover', function(e) {
  e.preventDefault();
});

dragArea.addEventListener('dragleave', function(e) {
  e.preventDefault();
});

// 拖拽释放
dragArea.addEventListener('drop', function(e) {
  e.preventDefault();
  var files = e.dataTransfer.files;

  for (var i = 0; i < files.length; i++) {
    // 传送二进制文件到服务端
    socket.send(files[i]);
  }
});

socket.onmessage = function(evt) {
  console.log('上传成功!');
};

上述代码使用WebSocket对象上传文件，将拖拽释放的文件传送到指定的WebSocket服务器。上传成功后，在服务器端将会接收到文件数据，并返回提示信息。

总之，通过以上步骤，我们可以实现JS文件/图片从电脑里面拖拽到浏览器上传文件/图片的功能，提升用户的上传体验。