web前端之复制图片到div中、使用contenteditable属性把元素变为可编辑状态、FileReader

方式一

<div id="idEditor" class="w_100_ h_200" contenteditable></div>

1、存在兼容性问题，而且contenteditable属性只是把div变为可编辑形式而已；
2、只能处理截屏形式的图片；
3、当把电脑上的图片粘贴到容器里面会存在两种情况，
情况一：不能正确显示，显示一张加载失败的图片；
情况二：粘贴没有任何反应，我遇到的就是这种情况。

方式二

方式二是在方式一的基础上进行优化。

document.addEventListener('paste', (e) => {
    let files = e.clipboardData.files;

    if (files.length > 0) {
        // 阻止事件默认行为
        e.preventDefault();
        
        const file = files[0];
        // 创建文件对象
        const reader = new FileReader();

        reader.onload = (event) => {
            const img = document.createElement('img');
            
            img.className = "w_86 h_68";
            img.src = event.target.result;
            idEditor.appendChild(img);
        };

        reader.readAsDataURL(file);
    }
});

contenteditable

MDN

全局属性contenteditable是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

FileReader

MDN

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用File或Blob对象指定要读取的文件或数据。

---

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

---

重要提示：FileReader仅用于以安全的方式从用户(远程)系统读取文件内容，它不能用于从文件系统中按路径名简单地读取文件。要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

---

备注：此特性在Web Worker中可用