原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效
需求：粘贴上传图片，截图工具，右键粘贴，或者ctrl+v粘贴
方法1：可直接套用富文本框的图片上传功能，完成复制粘贴
缺点：麻烦，样式难控制
方法2：用原生js完成，以下案例基于此，样式请自己动手调整
用js完成请注意收下几点：
1、前端传回去给后台是base64流，后台要将接收的base64转换成图片保存，记住不是二进制流，是base64位
2、editorWenban是可编辑的文本框，用以复制粘贴图片，tar_box是用来曾现图片的
前端代码如下：
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<title>测试测试</title>
</head> <style>
body {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
#tar_box {
width: 500px;
height: 500px;
border: 1px solid red;
} #editorWenban img{
display: none;
} #tar_box img{
width: 120px;
height: 120px;
margin:20px;
border: 1px solid #5a7710;
}
</style> <body> <div contenteditable style="width: 100px;height: 100px; border:1px solid" id="editorWenban">
</div> <div id="tar_box">
<!--<img src="" style=""/>-->
</div> <script>
document.addEventListener('paste', function (event) {
console.log(event)
var isChrome = false;
if ( event.clipboardData || event.originalEvent ) {
//not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if ( clipboardData.items ) {
// for chrome
var items = clipboardData.items,
len = items.length,
blob = null;
isChrome = true;
//items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）
//如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
//如果使用截图工具粘贴图片，len=1, items[0].type = 'image/png'
//如果粘贴纯文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
// console.log('len:' + len);
// console.log(items[0]);
// console.log(items[1]);
// console.log( 'items[0] kind:', items[0].kind );
// console.log( 'items[0] MIME type:', items[0].type );
// console.log( 'items[1] kind:', items[1].kind );
// console.log( 'items[1] MIME type:', items[1].type ); //阻止默认行为即不让剪贴板内容在div中显示出来
event.preventDefault(); //在items里找粘贴的image,据上面分析,需要循环
for (var i = 0; i < len; i++) {
if (items[i].type.indexOf("image") !== -1) {
// console.log(items[i]);
// console.log( typeof (items[i])); //getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
}
}
if ( blob !== null ) {
var reader = new FileReader();
reader.onload = function (event) {
// event.target.result 即为图片的Base64编码字符串
var base64_str = event.target.result
//可以在这里写上传逻辑 直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
uploadImgFromPaste(base64_str, 'paste', isChrome);
}
reader.readAsDataURL(blob);
}
} else {
//for firefox
setTimeout(function () {
//设置setTimeout的原因是为了保证图片先插入到div里，然后去获取值
var imgList = document.querySelectorAll('#editorWenban img'),
len = imgList.length,
src_str = '',
i;
for ( i = 0; i < len; i ++ ) {
if ( imgList[i].className !== 'my_img' ) {
//如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome); //var box = document.getElementById("#editorWenban");
//找到子元素
//var img=document.getElementsByTagName("#editorWenban img");
//console.log("imgimgimgimg",img)
//box.removeChild(img);
}, 1); }
} else {
//for ie11
setTimeout(function () { //document.getElementById("#editorWenban")
var imgList = document.querySelectorAll('#editorWenban img'),
len = imgList.length,
src_str = '',
i;
for ( i = 0; i < len; i ++ ) {
if ( imgList[i].className !== 'my_img' ) {
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome);
}, 1);
}
}) function uploadImgFromPaste (file, type, isChrome) {
console.log("file=============",file)
var formData = new FormData();
formData.append('imgByte', file);
formData.append('submission-type', type); var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8555/weChatHandleTask/saveToImgByStr',true);
xhr.onload = function () {
if ( xhr.readyState === 4 ) {
if ( xhr.status === 200 ) { var data = xhr.responseText;
var tarBox = document.getElementById('tar_box');
var img = document.createElement('img');
img.className = 'my_img';
img.src = 'http://127.0.0.1:8555/test/'+data;
//ie不生效,所以直接在样式中测试
img.style = 'width: 120px; height: 120px; margin:20px;border: 1px solid #5a7710;';
tarBox.appendChild(img); } else {
console.log( xhr.statusText );
}
};
};
xhr.onerror = function (e) {
console.log( xhr.statusText );
}
xhr.send(formData);
} </script> </body>
</html>
后台代码是springboot写的，如下：
/**
* 将接收的base64转换成图片保存
*
* @param imgByte
* base64数据
* @param cardNum
* 号码
* @return 成功返回图片保存路径，失败返回false
*/
@RequestMapping("/saveToImgByStr")
@ResponseBody
public Object saveToImgByStr(String imgByte, String cardNum, HttpServletRequest request, HttpServletResponse response) throws IOException { System.out.println("imgByte====="+imgByte);
String destDir = "F:\\ScgStaticPath\\test"; if(imgByte.indexOf("data:image/png;base64") > -1){
imgByte=imgByte.replaceAll("data:image/png;base64,","");
BASE64Decoder decoder = new BASE64Decoder();
byte[] imageByte = null;
try{
imageByte = decoder.decodeBuffer(imgByte);
for (int i = 0; i < imageByte.length; ++i) {
// 调整异常数据
if (imageByte[i] < 0) {
imageByte[i] += 256;
}
}
} catch (Exception e) {
e.printStackTrace();
} if (imageByte.length>0) {
try {
//获取文件上传的真实路径
//String uploadPath = request.getSession().getServletContext().getRealPath("/"); SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMdd");
String createNewDirStr = fmt.format(new Date()); //保存文件的路径
String filepath = destDir + File.separator + createNewDirStr; File destfile = new File (filepath); if (!destfile.exists()) {
destfile.mkdirs();
}
//文件新名称
String fileNameNew = getFileNameNew() + ".png";
File f = new File(destfile.getAbsoluteFile() + File.separator + fileNameNew);
// 将字符串转换成二进制，用于显示图片
// 将上面生成的图片格式字符串 imgStr，还原成图片显示
InputStream in = new ByteArrayInputStream(imageByte);
FileOutputStream fos = new FileOutputStream(f);
// BufferedOutputStream bos = new BufferedOutputStream(fos);
byte[] buf = new byte[1024];
int length;
length = in.read(buf, 0, buf.length); while (length != -1) {
fos.write(buf,0,length);
length = in.read(buf);
}
fos.flush();
fos.close();
in.close();
//String lastpath = filepath + File.separator + fileNameNew;
String lastpath = createNewDirStr + File.separator + fileNameNew;
System.out.println("返回图片路径：" + lastpath);
return lastpath; } catch (Exception e) {
e.printStackTrace();
} finally {
}
}
}else{ ServletInputStream inputStream = request.getInputStream(); //获取文件上传的真实路径
//String uploadPath = request.getSession().getServletContext().getRealPath("/"); SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMdd");
String createNewDirStr = fmt.format(new Date()); //保存文件的路径
String filepath = destDir + File.separator + createNewDirStr;
File destfile = new File( filepath);
if (!destfile.exists()) {
destfile.mkdirs();
}
//文件新名称
String fileNameNew = getFileNameNew() + ".png";
File f = new File(destfile.getAbsoluteFile() + File.separator + fileNameNew);
if (!f.exists()) {
OutputStream os = new FileOutputStream(f);
BufferedOutputStream bos = new BufferedOutputStream(os); byte[] buf = new byte[1024];
int length;
length = inputStream.read(buf, 0, buf.length); while (length != -1) {
bos.write(buf, 0, length);
length = inputStream.read(buf);
}
bos.close();
os.close();
inputStream.close();
//String lastpath = filepath + File.separator + fileNameNew;
String lastpath = createNewDirStr + File.separator + fileNameNew;
System.out.println("返回图片路径：" + lastpath);
return lastpath;
}
} return false;
} /**
* 为文件重新命名，命名规则为当前系统时间毫秒数
*
* @return string
*/
private String getFileNameNew() {
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS");
return fmt.format(new Date());
} /**
* 以当前日期为名，创建新文件夹
*
* @return
*/
private String createNewDir() {
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMdd");
return fmt.format(new Date());
}
测试完成效果图：
原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效的更多相关文章
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 设为首页 和 收藏本站js代码 兼容IE,chrome,ff
设为首页 和 收藏本站js代码 兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#defau ...
- 基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- js 复制粘贴功能记录
最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- 黄聪：原生js的音频播放器，兼容pc端和移动端（原创）
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
- mybatis自动生成代码插件mybatis-generator使用流程(亲测可用)
mybatis-generator是一款在使用mybatis框架时,自动生成model,dao和mapper的工具,很大程度上减少了业务开发人员的手动编码时间 坐着在idea上用maven构建spri ...
- JS input文本框禁用右键和复制粘贴功能的代码
代码如下: function click(e) { if (document.all) { ||||) { oncontextmenu='return false'; } } if (document ...
随机推荐
- websrom编译器
webstorm less环境配置 备注: 安装node后,在命令行输入npm install -g less 即可安装less,打开webstorm setting-Tools-FileWatche ...
- jquery怎么添加多个类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jenkins + maven + nexus + [ svn 或 GitLab 或 GitHub ]
目录 介绍 DevOps平台四大模块 针对DevOps开源项目 Jenkins 介绍 Maven 介绍 maven的核心概念介绍 SVN介绍 Nexus介绍 Maven私服的 个特性: 流程图 环境搭 ...
- 《手把手教你》系列练习篇之7-python+ selenium自动化测试 -压轴篇（详细教程）
1. 简介 “压轴”原本是戏曲名词,指一场折子戏演出的倒数第二个剧目.在现代社会中有很多应用,比如“压轴戏”,但压轴也是人们知识的一个盲区.“压轴”本意是指倒数第二个节目,而不是人们常说的倒数第一个, ...
- VUE+DRF系列
vue基础系列 001 路飞学诚项目简介 002 Vue简介 003 Vue引入 004 文本指令 005 事件指令 006 斗篷指令 007 属性指令 008 表单指令 009 条件指令 010 路 ...
- 【并发编程】Object的wait、notify和notifyAll方法
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 方法简介 wait方法 wait方法是Object类中的 ...
- NSAttributedString可以强制转换为NSMutableAttributedString类型吗？下面这代码有什么问题 为什么报错
-(void)insetEmotion:(EmotionModel*)emotionModel{ if(emotionModel.code){ /** 在TextView中插入图片首选要知道光标的位置 ...
- JS获取当前完整的url地址以及参数的方法
javascript 获取当前 URL 参数的两种方法: //返回的是字符串形式的参数,例如:class_id=3&id=2& function getUrlArgStr(){ var ...
- webpack4分包方案
webpack4放弃了 commonsChunkPlugin,使用更方便灵活智能的 splitChunks 来做分包的操作. 下面有几个例子,并且我们假设所有的chunks大小至少为30kb(采用sp ...
- luogu P1972 [SDOI2009]HH的项链 |树状数组 或 莫队
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...