js实现图片粘贴上传到服务器并展示的实例

JavaScript 2019-01-07

最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴)

demo1:

图片，len=2,items[0].type = 'text/plain',items[1].type = 'image/*' //如果使用截图工具粘贴图片，len=1,items[0].type = 'image/png' //如果粘贴纯文本+HTML，len=2,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 );

 //阻止默认行为即不让剪贴板<a href="https://www.f2er.com/tag/neirong/" target="_blank" class="keywords">内容</a>在div中<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>出来
 event.preventDefault();

 //在items里找粘贴的image,据上面分析,需要循环
 for (var i = 0; i < len; i++) {
  if (items[i].type.indexOf("image") !== -1) {
   //getAsFile() 此<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>只是living standard firefox ie11 并<a href="https://www.f2er.com/tag/buzhichi/" target="_blank" class="keywords">不支持</a>
   blob = items[i].getAsFile();
   uploadImgFromPaste(blob,'paste',isChrome);
  }
 }

 /*if ( blob !== null ) {
  var reader = new FileReader();
  reader.onload = function (event) {
   // event.target.result 即为<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>的Base64编码字符串
   var base64_str = event.target.result;//获得<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>base64字符串
   //可以在这里写<a href="https://www.f2er.com/tag/shangchuan/" target="_blank" class="keywords">上传</a>逻辑 直接将base64编码的字符串<a href="https://www.f2er.com/tag/shangchuan/" target="_blank" class="keywords">上传</a>（可以尝试传入blob对象，看看<a href="https://www.f2er.com/tag/houtai/" target="_blank" class="keywords">后台</a>程序能否解析）
  uploadImgFromPaste(base64_str,isChrome);
  }
  reader.readAsDataURL(blob);//传入blob对象,读取<a href="https://www.f2er.com/tag/wenjian/" target="_blank" class="keywords">文件</a>
 }*/
} else {
 //for firefox
 setTimeout(function () {
  //设置setTimeout的原因是为了保证<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>先插入到div里，然后去<a href="https://www.f2er.com/tag/huoqu/" target="_blank" class="keywords">获取</a>值
  var imgList = document.querySelectorAll('#aaa img'),len = imgList.length,src_str = '',i;
  for ( i = 0; i < len; i ++ ) {
   if ( imgList[i].className !== 'my_img' ) {
    //如果是截图那么src_str就是base64 如果是复制的其他网页<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>那么src_str就是此<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>在别人服务器的地址
    src_str = imgList[i].src;
   }
  }
  uploadImgFromPaste(src_str,isChrome);
 },1);
}

} else {
//for ie11
setTimeout(function () {
var imgList = document.querySelectorAll('#aaa img'),i;
for ( i = 0; i < len; i ++ ) {
if ( imgList[i].className !== 'my_img' ) {
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str,isChrome);
},1);
}
})

//调用图片上传接口,将file文件以formData形式上传
function uploadImgFromPaste (file,type,isChrome) {
var formData = new FormData();
formData.append('files',file);
formData.append('submission-type',type);

var xhr = new XMLHttpRequest();
xhr.open('POST','/upload_editor_photo3');
xhr.onload = function () {
console.log(xhr.readyState);
if ( xhr.readyState === 4 ) {
if ( xhr.status === 200 ) {
var data = JSON.parse(xhr.responseText),editor = document.getElementById('aaa');
if ( isChrome ) {
var len=data.data.length;
for ( var i = 0; i < len; i ++) {
var img = document.createElement('img');
img.className = 'my_img';
img.src = data.data[i]; //设置上传完图片之后展示的图片
editor.appendChild(img);
}
} else {
var imgList = document.querySelectorAll('#aaa img'),i;
for ( i = 0; i < len; i ++) {
if ( imgList[i].className !== 'my_img' ) {
imgList[i].className = 'my_img';
imgList[i].src = data.data[i];
}
}
}

 } else {
  console.log( xhr.statusText );
 }
};

};
xhr.onerror = function (e) {
console.log( xhr.statusText );
}
xhr.send(formData);
}

demo2:

内容在div中显示出来 event.preventDefault(); }); function upload(fileList) { for(var i = 0,l = fileList.length; i < l; i++){ var fd = new FormData(); var f = fileList[i]; fd.append('files',f); var editor=document.getElementById("aaa"); $.ajax({ url:"/upload_editor_photo3",type: 'POST',dataType: 'json',data: fd,processData: false,contentType: false,xhrFields: { withCredentials: true },headers: { 'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': 'true' },success: function(res){ var len=res.data.length; for ( var i = 0; i < len; i ++) { var img = document.createElement('img'); img.src = res.data[i]; //设置上传完图片之后展示的图片 editor.appendChild(img); } },error: function(){ alert("上传图片错误"); } }); } }