js实现ctrl+v粘贴并上传图片
前端页面:
<textarea class="scroll" id="text" placeholder="在此输入..."></textarea>
<script type="text/javascript">
document.querySelector("#text").addEventListener("paste", function(e){
//添加监听paste事件
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" && cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var data = new FormData();
data.append("blob", blob);
$.ajax({
url : "/user/uploads",
type : 'POST',
cache : false,
data : data,
processData : false,
contentType : false,
success : function(result){
if(result.state == "1"){
console.log(result.msg)
var html = "<img src='"+result.fileAddress+"' width='200' height='200'>";
$("#text").val(html);
$("#submit").trigger("click"); //模拟点击按钮,粘贴之后直接发送
}else if(result.state == "2"){
console.log(result.msg)
}else if(result.state == "3"){
console.log(result.msg)
}
}
});
}
}
}, false)
</script>
后端上传方法:
@RequestMapping(value="/uploads",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
@ResponseBody
public String uploads(@RequestParam(value = "blob", required = false) MultipartFile blob, HttpServletRequest request){
/**
* 入参直接写MultipartFile blob获取的参数是null,具体原因不清楚
* 还有一个主意事项就是入参的参数名要和前面传值的参数名对应上例(blob),否则接收不到参数
*/
JSONObject jsonObject = new JSONObject();
if(!blob.isEmpty()){
if(blob.getSize() >= 5242880){
jsonObject.accumulate("state", "3");
jsonObject.accumulate("msg", "请上传小于5M的文件!");
}else{
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmsssss");
String id = sdf.format(new Date());
String path = request.getSession().getServletContext().getRealPath("/uploads");
String filename = blob.getOriginalFilename();
String[] endfilename = filename.split("\\.");
String finalname = id + "." + endfilename[endfilename.length-1];
File filepath = new File(path, finalname);
if(!filepath.getParentFile().exists()){
filepath.getParentFile().mkdirs();
}
try {
blob.transferTo(new File(path + File.separator + finalname));
jsonObject.accumulate("state", "1");
jsonObject.accumulate("msg", "上传成功!");
jsonObject.accumulate("fileAddress", "/uploads/"+finalname);
} catch (Exception e) {
e.printStackTrace();
}
}
}else{
jsonObject.accumulate("state", "2");
}
return JsonUtils.objectToJson(jsonObject);
}
---------------------
js实现ctrl+v粘贴并上传图片的更多相关文章
- js实现ctrl+v粘贴图片或是截图
浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...
- js实现ctrl+v粘贴上传图片(兼容chrome,firefox,ie11)
背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...
- c# TextBox只允许输入数字,禁用右键粘贴,允许Ctrl+v粘贴数字
TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和Ctrl+v private void txtNumber_KeyPress( ...
- 2019-3-22c# TextBox只允许输入数字,禁用右键粘贴,允许Ctrl+v粘贴数字
TextBox 禁止复制粘贴 ShortcutsEnabled =false TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和 ...
- wangEditor实现ctrl+v粘贴word图片并上传
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- js实现ctrl+v上传图片
描述:实现类似QQ截图删上传图片的功能 a.需要的js插件 paste.image.js 地址:https://github.com/iyangyuan/pasteimg b.paste.image. ...
- C# 控制台程序实现 Ctrl + V 粘贴功能
代码主要分为两部分,首先调用系统API注册剪切板相关的事件,然后监控用户的按键操作.完整代码如下: class ClipBoard { [DllImport("user32.dll" ...
- 如何屏蔽ctrl + v 粘贴事件,鼠标右键粘贴事件
通常在自己的APP里的密码框,验证码框需要屏蔽复制,粘贴,怎么办呢? 有三种方法: 1 hook 此方法是最完全的,但由于hook是全局的,容易影响到其它代码. 2 子类化文本框, 重写OnPaste ...
随机推荐
- bzoj 4756 Promotion Counting —— 线段树合并
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4756 合并子树的权值线段树: merge 返回 int 或者是 void 都可以. 代码如下 ...
- bzoj1025 [SCOI2009]游戏——因数DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1025 这篇博客写得真好呢:https://www.cnblogs.com/phile/p/4 ...
- javascript break 和continue
break语句还可以跳出循环,也就是结束循环语句的执行. continue语句的作用为结束本次循环,接着进行下一次是否执行循环的判断. continue与break的区别是:break是彻底结束循环, ...
- centos7 && centos6.5部KVM使用NAT联网并为虚拟机配置firewalld && iptables防火墙端口转发
centos7 && centos6.5 部KVM使用NAT联网并为虚拟机配置firewalld && iptables防火墙端口转发 一.准备工作: 1: 检查kvm ...
- BZOJ3895 rock
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3895 看这题感觉好神. SG函数,dp....好像都不行呀. 最后去膜拜题解发现记忆化搜索 囧 ...
- Logistic/Softmax Regression
辅助函数 牛顿法介绍 %% Logistic Regression close all clear %%load data x = load('ex4x.dat'); y = load('ex4y.d ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时7
课时7 线性分类器损失函数与最优化(下) 我们为什么要最大化对数概率而非直接最大化概率? 你在做逻辑斯蒂回归时,如果你只是想要最大化概率,那你使用log是无意义的.因为log函数是单调函数,最大化概率 ...
- 基于FBX SDK的FBX模型解析与加载 -(四)
8. 骨骼蒙皮动画 骨骼蒙皮动画是当前游戏引擎中最常用的一种动画方式,关于其基本原理网络上的资料较多,关于到涉及的其它较复杂操作,如插值.融合等在这里也就先不再讨论了,而且其实现方式也与具体引擎的动作 ...
- WPF DataGrid foreground 绑定问题
初学WPF , 希望对DataGrid 中所属的一个Column名下的值的颜色动态修改 <DataGridTextColumn Header="隐含回购利率(%)" Bin ...
- Contest Hunter 0103最短Hamilton路径 【状压dp】 By cellur925
题目传送门 Hamilton路径的定义:从0(起点)到n-1(终点)不重不漏地经过每个点恰好一次. 由于数据范围非常小,考虑状压.如NOIP2017宝藏一题,把状态压缩设为n个点是否已到达的二进制数. ...