contenteditable="true"的div截取复制的图片数据上传

要实现这个功能，需要使用JavaScript来获取复制到剪贴板中的图片数据，并将其上传到服务器。

1. 监听div的paste事件，获取剪贴板中的数据

var div = document.getElementById("editableDiv");
div.addEventListener("paste", function(e) {
  var items = e.clipboardData.items;
  for (var i = 0; i < items.length; i++) {
    // 判断是否是图片数据
    if (items[i].type.indexOf("image") !== -1) {
      var blob = items[i].getAsFile();
      // 将图片数据上传到服务器
      upload(blob);
    }
  }
});

2. 将图片数据上传到服务器

function upload(blob) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload", true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log("上传成功");
    }
  };
  xhr.send(blob);
}

注意：需要在服务器端实现接收上传数据的接口。

相关问题

<tr> <td contenteditable="true">工艺膜层</td> <td contenteditable="true">AOI Step</td> <td contenteditable="true">不良类型</td> <td contenteditable="true">Layer（Code）</td> <td contenteditable="true">Type</td> <td contenteditable="true">Dept</td> <td contenteditable="true">Subcode</td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr>

这段代码是一个HTML表格中的一行数据（<tr>表示table row，即表格中的一行）。其中每个单元格（<td>）都设置了contenteditable属性为true，表示该单元格内容可编辑。这个表格可能用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息，例如：

- 工艺膜层
- AOI Step
- 不良类型
- Layer（Code）
- Type
- Dept
- Subcode
- Code描述
- Image1
- Image2
- Image3
- Image4
- Image5
- Image6
- 判定细则

这些信息可能是用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息。其中，Image1到Image6可能是用于记录不良情况的照片或者截图，而判定细则可能是用于记录不良情况的判定标准。

可是我现在有两个DIV是嵌套关系，并且两个DIV都加了contenteditable=true属性，现在给里面的DIV绑定focus事件无效，如果外面DIV不设置contenteditable=true属性就有效

可能是因为设置了contenteditable=true属性后，浏览器会将事件交给编辑器处理，而不是直接触发绑定的事件。你可以尝试在外层DIV上设置contenteditable=false，或者在内层DIV上取消contenteditable=true，看看是否能解决问题。另外，你也可以考虑使用冒泡事件来处理这个问题，即在外层DIV上绑定focus事件，然后通过事件冒泡机制处理内层DIV的focus事件。