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

2023-12-14 05:45:34


方式一

<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应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用FileBlob对象指定要读取的文件或数据。


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


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


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

文章来源:https://blog.csdn.net/weixin_51157081/article/details/115361383
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。