js & Input & Paste & Clipboard & upload & Image

input paste upload image js

Clipboard_API

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API



let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`); box.addEventListener("paste", function(event) {
let items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(`clipboardData items: `, JSON.stringify(items, null, 4));
// will give you the mime types
for (const item of items) {
// let item = items[i];
if (item.kind === "file") {
// let blob = item.getAsFile();
// let url = window.URL.createObjectURL(blob);
let blob = item.getAsFile();
let reader = new FileReader();
reader.onload = function(event) {
console.log(`event.target.result =`, event.target.result);
// data:image/png;base64,
let img = document.createElement(`img`);
img.src = event.target.result;
img.setAttribute(`class`, `clearfix`);
// img.class = ".clearfix";
// img.class = "clearfix";
img.style = "width: 30%; height: 30%;";
// img.style = "width: 200px; height: 100px;";
// textarea.appendChild(img);
// textarea.insertAdjacentElement(`beforeend`, img);
textarea.insertAdjacentElement(`afterend`, img);
};
// data url
reader.readAsDataURL(blob);
}
}
});

type bug


// 单聊贴图发送
let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// document.addEventListener("paste", function (e) {
log(`e =`, e);
log(`e.clipboardData`, e.clipboardData);
log(`e.clipboardData.types`, e.clipboardData.types);
log(`e.clipboardData.items`, e.clipboardData.items);
log(`e.clipboardData.items.length`, e.clipboardData.items.length);
log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
let blob = e.clipboardData.items[0].getAsFile();
let url = window.URL.createObjectURL(blob);
// preview
let img = document.createElement(`img`);
// img.src = event.target.result;
img.src = url;
img.setAttribute(`class`, `clearfix`);
img.style = "width: 200px; height: 100px;";
textarea.insertAdjacentElement(`afterend`, img);
// preview
let uid = conn.getUniqueId();
// 生成本地消息id
let msg = new WebIM.message("img", uid);
// 创建图片 img 消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url,
},
to: "test",
// to: "root",
// 接收消息对象
roomType: false,
// 单聊
onFileUploadError(err) {
log("Image Upload Error", err);
},
onFileUploadComplete(data) {
log("Image Upload Complete", data);
},
success(id) {
log("Image Upload Success", id);
},
});
conn.send(msg.body);
}
}
}
});

OK


// 单聊贴图发送
let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// document.addEventListener("paste", function (e) {
log(`e =`, e);
log(`e.clipboardData`, e.clipboardData);
log(`e.clipboardData.types`, e.clipboardData.types);
log(`e.clipboardData.items`, e.clipboardData.items);
log(`e.clipboardData.items.length`, e.clipboardData.items.length);
log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
// if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
// let blob = e.clipboardData.items[0].getAsFile();
if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
let blob = e.clipboardData.items[1].getAsFile();
let url = window.URL.createObjectURL(blob);
// preview
let img = document.createElement(`img`);
// img.src = event.target.result;
img.src = url;
img.setAttribute(`class`, `clearfix`);
img.style = "width: 200px; height: 100px;";
textarea.insertAdjacentElement(`afterend`, img);
// preview
let uid = conn.getUniqueId();
// 生成本地消息id
let msg = new WebIM.message("img", uid);
// 创建图片 img 消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url,
},
to: "test",
// to: "root",
// 接收消息对象
roomType: false,
// 单聊
onFileUploadError(err) {
log("Image Upload Error", err);
},
onFileUploadComplete(data) {
log("Image Upload Complete", data);
},
success(id) {
log("Image Upload Success", id);
},
});
conn.send(msg.body);
}
}
}
});

ClipboardEvent

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

clipboardData

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

https://caniuse.com/#search=clipboardData

https://caniuse.com/#search=execCommand

https://codepen.io/netsi1964/pen/IoJbg

https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c



https://stackoverflow.com/questions/50427513/html-paste-clipboard-image-to-file-input



https://mobiarch.wordpress.com/2013/09/25/upload-image-by-copy-and-paste/



https://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-javascript/4400761



refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


js & Input & Paste & Clipboard & upload & Image的更多相关文章

  1. js & input event & input change event

    js & input event & input change event vue & search & input change <input @click=& ...

  2. angular.js input

    <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8& ...

  3. js input输入框的总结

    一.输入框只能输入数字 原文:https://www.cnblogs.com/sese/p/5872144.html 分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋 ...

  4. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  5. js input radio点击事件

    html代码: <input type="radio" name="myname" value="1" />1 <inpu ...

  6. JS input文本框禁用右键和复制粘贴功能的代码

    代码如下: function click(e) { if (document.all) { ||||) { oncontextmenu='return false'; } } if (document ...

  7. JS input file 转base64 JS图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js input输入事件兼容性问题

    if(navigator.userAgent.indexOf('Android') > -1){ $("#sign").on("input", funct ...

  9. JS INPUT输入的时候全角自动转为半角

    function CtoH(obj){var str=obj.value;var result="";for (var i = 0; i < str.length; i++) ...

随机推荐

  1. 手淘架构组最新实践 | iOS基于静态库插桩的⼆进制重排启动优化 抖音研发实践:基于二进制文件重排的解决方案 APP启动速度提升超15% 编译期插桩

    抖音研发实践:基于二进制文件重排的解决方案 APP启动速度提升超15% 原创 Leo 字节跳动技术团队 2019-08-09 https://mp.weixin.qq.com/s/Drmmx5JtjG ...

  2. 「笔记」AC 自动机

    目录 写在前面 定义 引入 构造 暴力 字典图优化 匹配 在线 离线 复杂度 完整代码 例题 P3796 [模板]AC 自动机(加强版) P3808 [模板]AC 自动机(简单版) 「JSOI2007 ...

  3. Linux 文件搜索神器 find 实战详解,建议收藏!

    大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...

  4. 最短路-Bellmm-ford算法

    Bellmm-ford算法 解决什么样的问题 有边数限制的最短路,存在负权边,负环 概念 通俗的来讲就是:假设 1 号点到 n 号点是可达的,每一个点同时向指向的方向出发,更新相邻的点的最短距离,通过 ...

  5. 十一:SpringBoot-事务管理

    SpringBoot-事务管理 1.事务管理简介 1.1 特性:ACID 1.2 隔离问题 1.3 隔离级别 2.Spring事务管理 2.1 顶级接口 2.2 事务状态 2.3 事务定义 1.事务管 ...

  6. Web信息收集-目标扫描-OpenVAS

    Web信息收集-目标扫描-OpenVAS 一.OpenVAS简述 二.部署OpenVAS 2.1 升级Kali Linux 2.2 安装OpenVAS 2.3 修改admin账户密码 2.4 修改默认 ...

  7. Nacos服务心跳和健康检查源码介绍

    服务心跳 Nacos Client会维护一个定时任务通过持续调用服务端的接口更新心跳时间,保证自己处于存活状态,防止服务端将服务剔除,Nacos默认5秒向服务端发送一次,通过请求服务端接口/insta ...

  8. Vue.js到前端工程化

    b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...

  9. 让visual studio总是以管理员身份启动

    环境 win10 visual studio 2019 步骤 找到visual studio的安装目录 怎么找? 右击win10开始菜单中visual studio的快捷方式, 依次选择 更多-> ...

  10. 十四自定义构建购物计算组件&表单组件

    目录: 1.前言 2.组件介绍 3.js业务逻辑层 4.视图层 5.css属性设置 6.效果呈现 1.前言: 在第九篇文章购物车做好后,还忘记了一个至关重要的计算组件.在鸿蒙的组件中并没有提供这样一个 ...