图片粘贴预览丨技术开发分享录

图片粘贴预览

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"```html\n<!DOCTYPE html>\n<html>\n\n<head>\n    <title>图片粘贴预览</title>\n</head>\n\n<body>\n    <div id=\"js_preview\"></div>\n    <p id=\"js_error_msg\"></p>\n\n    <script type=\"text/javascript\">\n    document.addEventListener('paste', function(event) {\n        var items = (event.clipboardData || window.clipboardData).items; // items是伪数组不能直接打印\n        var file = null;\n        if (items && items.length) {\n            for (var i = 0; i < items.length; i++) {\n                if (items[i].type.indexOf('image') !== -1) {\n                    file = items[i].getAsFile();\n                    break;\n                }\n            }\n        } else {\n            js_error_msg.innerHTML = '<span style=\"color:red;\">当前浏览器不支持</span>';\n            return;\n        }\n        if (!file) {\n            js_error_msg.innerHTML = '<span style=\"color:red;\">粘贴内容非图片</span>';\n            return;\n        }\n        // 预览\n        var reader = new FileReader()\n        reader.readAsDataURL(file);\n        reader.onload = function(event) {\n            js_preview.innerHTML = '<img src=\"' + event.target.result + '\" class=\"upload-image\">';\n        }\n    });\n    </script>\n</body>\n\n</html>\n```\n\n**type类型**:\n\n- text/plain\n- text/html\n- image/*\n\n> id是挂在window对象上的全局变量,可以直接使用"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看