js实现图片粘贴上传到服务器并展示的实例
最近看了一些有关于js实现图片粘贴上传的demo,实现如下:(这里只能检测到截图粘贴和图片右键复制之后粘贴)
demo1:
document.addEventListener('paste',function(event){
console.log(event)
varisChrome=false;
if(event.clipboardData||event.originalEvent){
//notforie11某些chrome版本使用的是event.originalEvent
varclipboardData=(event.clipboardData||event.originalEvent.clipboardData);
if(clipboardData.items){
//forchrome
varitems=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]MIMEtype:',items[0].type);
//console.log('items[1]kind:',items[1].kind);
//console.log('items[1]MIMEtype:',items[1].type);
//阻止默认行为即不让剪贴板内容在div中显示出来
event.preventDefault();
//在items里找粘贴的image,据上面分析,需要循环
for(vari=0;i
demo2:
//处理粘贴事件
$("#aaa").on('paste',function(eventObj){
//处理粘贴事件
varevent=eventObj.originalEvent;
varimageRe=newRegExp(/image\/.*/);
varfileList=$.map(event.clipboardData.items,function(o){
if(!imageRe.test(o.type)){return}
varblob=o.getAsFile();
returnblob;
});
if(fileList.length<=0){return}
upload(fileList);
//阻止默认行为即不让剪贴板内容在div中显示出来
event.preventDefault();
});
functionupload(fileList){
for(vari=0,l=fileList.length;i
注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究.
html:
接口返回数据格式:
{
//errno即错误代码，0表示没有错误。
//如果有错误，errno!=0，可通过下文中的监听函数fail拿到该错误码进行自定义处理
errno:0,
//data是一个数组，返回若干图片的线上地址
data:[
'图片1地址',
'图片2地址',
'……'
]
}
以上这篇js实现图片粘贴上传到服务器并展示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。