当前位置: 首页 > article >正文

js实现ctrl+v粘贴并上传图片

再分享一个刚学会的小东东:聊天室实现ctrl+v粘贴并上传图片,亲测有效(目前只能粘贴QQ或者微信的截图上传,桌面上的图片直接复制再粘贴无效,今后再深究),下面上代码

前端页面:

<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);
}
GAME OVER,功能实现~
--------------------- 

转载于:https://www.cnblogs.com/hyhy904/p/10995873.html

http://www.lryc.cn/news/2413011.html

相关文章:

  • 如何设置域名泛解析及解决恶意泛域名解析的方法
  • IE浏览器的缓存设置
  • 分析了一下360安全卫士的 HOOK(二)——架构与实现(zt)
  • 不用再为下载而发愁了,提供一款支持115网盘、迅雷、快车、旋风、飞速网盘的专用链接解析出资源的真实地址的软件...
  • Meterpreter木马技术分析与防范
  • web飞信 接口解析
  • Struts 2.0
  • Makefile经典教程(转)
  • aspectjweaver.jar包下载
  • PHP汉字转换拼音的函数代码
  • 证明与计算(3): 二分决策图(Binary Decision Diagram, BDD)
  • Python办公自动化全攻略!从入门到精通,只需这几步!
  • HTML通用代码
  • 白山搜索引擎优化收费_在网络推广中,SEO排名优化是成本最低的方式
  • Null Object模式
  • 迅雷老版本下载地址
  • 管理项目干系人时,巧用工具可以事半功倍
  • python实现labelme_json_to_dataset数据集标签批量提取
  • QQ英文版有点奇怪
  • 2021数学建模国赛B题《对乙醇偶合制备 C4 烯烃的问题研究》省一,第一次参加分享经验
  • 微pe工具箱 系统安装教程_通用PE工具箱装系统(V4.0)——安装原版WIN7系统
  • 酒店客房管理系统的设计与实现毕业设计
  • BIOS下关于CPU性能常用设置的解释及建议
  • Ubuntu11.04内核6.5.0.14系统USB转CAN适配器SOCKETCAN驱动
  • [转]吐血推荐250部必看电影下载 IMDB TOP 250 download
  • 最新pr值大于6的网站大全
  • 微信公众平台消息接口开发(8)小黄鸡(小贱鸡)机器人
  • 云点播网页版_有翡百度云资源手机版网盘50集(点播超前)这里拿
  • 牛逼了【Android逆向】小白也能学会的一个小时破解某猫社区VIP会员!
  • Firefox里面玩FC游戏 基本上小时候的小霸王游戏都有