原生JavaScript如何获取拖拽放置元素的二进制文件内容

你的代码存在3个关键问题，不符合浏览器原生文件拖拽、文件输入框的API规则：

• 浏览器出于安全限制，禁止直接给<input type="file">的value属性赋值字符串（不管是文件路径还是二进制字符串），否则任意网页都可以随意读取用户本地文件。文件输入框仅支持通过DataTransfer API构造文件列表，赋值给它的files属性来设置选中文件。
• 拖拽事件默认行为是让浏览器直接打开拖入的文件，你没有阻止dragover、drop事件的默认行为，不仅拿不到文件数据，还会直接跳转离开当前页面。
• 你引用的BITS_from_this_DROPPED_element是不存在的自定义变量，拖拽传入的文件数据实际存储在drop事件对象的dataTransfer.files字段中，返回的File对象本身就是本地文件二进制数据的引用，不需要额外手动读取二进制内容，表单提交时会自动按multipart/form-data规则编码上传。

完全原生无依赖，不需要读取二进制手动拼接，直接对接原生表单提交逻辑：

<form action="https://cocacola.tld/index.php" enctype="multipart/form-data" method="post">
  <input type="file" name="bitsfile" id="bitsFileInput" />
  <div 
    id="dropArea" 
    style="border: 2px dashed #eee; padding: 32px; text-align: center; cursor: pointer;"
  >
    拖拽文件到此处上传
  </div>
  <hr>
  <input type="submit" value="提交上传">
</form>

<script>
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('bitsFileInput');

// 必须阻止dragover默认行为，否则不会触发drop事件
dropArea.addEventListener('dragover', e => {
  e.preventDefault();
  dropArea.style.borderColor = '#2563eb';
});

// 拖拽离开区域时恢复样式
dropArea.addEventListener('dragleave', () => {
  dropArea.style.borderColor = '#eee';
});

// 处理文件放置逻辑
dropArea.addEventListener('drop', e => {
  e.preventDefault();
  dropArea.style.borderColor = '#eee';

  const droppedFiles = e.dataTransfer.files;
  if (!droppedFiles.length) return;

  // 构造DataTransfer容器存放选中文件
  const transfer = new DataTransfer();
  // 单文件上传取第一个即可，多文件可循环add所有文件
  transfer.items.add(droppedFiles[0]);
  // 给文件输入框赋值选中的文件
  fileInput.files = transfer.files;

  // 可选：更新区域提示
  dropArea.textContent = `已选择文件：${droppedFiles[0].name}（${(droppedFiles[0].size/1024).toFixed(1)}KB）`;
});
</script>

• 如果你确实需要拿到文件的二进制数据做自定义校验（比如文件头判断、哈希计算），可以通过FileReaderAPI读取：

  const reader = new FileReader();
  reader.onload = () => {
    // reader.result 就是ArrayBuffer格式的二进制数据
    const binaryData = reader.result;
  };
  reader.readAsArrayBuffer(droppedFiles[0]);
  

  普通表单上传场景不需要做这一步，直接赋值File对象即可，浏览器会自动处理二进制编码。
• 如果需要支持多文件上传，给文件输入框加上multiple属性，循环遍历e.dataTransfer.files把所有文件都添加到DataTransfer容器中即可。
• 不要尝试绕过安全规则直接给file输入框赋值，所有直接修改value的操作都会被浏览器拦截，没有兼容方案。

内容的提问来源于stack exchange，提问作者VyR