js & Input & Paste & Clipboard & upload & Image
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/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的更多相关文章
- js & input event & input change event
js & input event & input change event vue & search & input change <input @click=& ...
- angular.js input
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8& ...
- js input输入框的总结
一.输入框只能输入数字 原文:https://www.cnblogs.com/sese/p/5872144.html 分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋 ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- js input radio点击事件
html代码: <input type="radio" name="myname" value="1" />1 <inpu ...
- JS input文本框禁用右键和复制粘贴功能的代码
代码如下: function click(e) { if (document.all) { ||||) { oncontextmenu='return false'; } } if (document ...
- JS input file 转base64 JS图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js input输入事件兼容性问题
if(navigator.userAgent.indexOf('Android') > -1){ $("#sign").on("input", funct ...
- JS INPUT输入的时候全角自动转为半角
function CtoH(obj){var str=obj.value;var result="";for (var i = 0; i < str.length; i++) ...
随机推荐
- 手淘架构组最新实践 | iOS基于静态库插桩的⼆进制重排启动优化 抖音研发实践:基于二进制文件重排的解决方案 APP启动速度提升超15% 编译期插桩
抖音研发实践:基于二进制文件重排的解决方案 APP启动速度提升超15% 原创 Leo 字节跳动技术团队 2019-08-09 https://mp.weixin.qq.com/s/Drmmx5JtjG ...
- 「笔记」AC 自动机
目录 写在前面 定义 引入 构造 暴力 字典图优化 匹配 在线 离线 复杂度 完整代码 例题 P3796 [模板]AC 自动机(加强版) P3808 [模板]AC 自动机(简单版) 「JSOI2007 ...
- Linux 文件搜索神器 find 实战详解,建议收藏!
大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...
- 最短路-Bellmm-ford算法
Bellmm-ford算法 解决什么样的问题 有边数限制的最短路,存在负权边,负环 概念 通俗的来讲就是:假设 1 号点到 n 号点是可达的,每一个点同时向指向的方向出发,更新相邻的点的最短距离,通过 ...
- 十一:SpringBoot-事务管理
SpringBoot-事务管理 1.事务管理简介 1.1 特性:ACID 1.2 隔离问题 1.3 隔离级别 2.Spring事务管理 2.1 顶级接口 2.2 事务状态 2.3 事务定义 1.事务管 ...
- Web信息收集-目标扫描-OpenVAS
Web信息收集-目标扫描-OpenVAS 一.OpenVAS简述 二.部署OpenVAS 2.1 升级Kali Linux 2.2 安装OpenVAS 2.3 修改admin账户密码 2.4 修改默认 ...
- Nacos服务心跳和健康检查源码介绍
服务心跳 Nacos Client会维护一个定时任务通过持续调用服务端的接口更新心跳时间,保证自己处于存活状态,防止服务端将服务剔除,Nacos默认5秒向服务端发送一次,通过请求服务端接口/insta ...
- Vue.js到前端工程化
b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...
- 让visual studio总是以管理员身份启动
环境 win10 visual studio 2019 步骤 找到visual studio的安装目录 怎么找? 右击win10开始菜单中visual studio的快捷方式, 依次选择 更多-> ...
- 十四自定义构建购物计算组件&表单组件
目录: 1.前言 2.组件介绍 3.js业务逻辑层 4.视图层 5.css属性设置 6.效果呈现 1.前言: 在第九篇文章购物车做好后,还忘记了一个至关重要的计算组件.在鸿蒙的组件中并没有提供这样一个 ...