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

最近看了一些有关于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="/tag/neirong/" target="_blank" class="keywords">内容</a>在div中<a href="/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="/tag/fangfa/" target="_blank" class="keywords">方法</a>只是living standard firefox ie11 并<a href="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>的Base64编码字符串
   var base64_str = event.target.result;//获得<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>base64字符串
   //可以在这里写<a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a>逻辑 直接将base64编码的字符串<a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a>（可以尝试传入blob对象，看看<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>程序能否解析）
  uploadImgFromPaste(base64_str,isChrome);
  }
  reader.readAsDataURL(blob);//传入blob对象,读取<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>
 }*/
} else {
 //for firefox
 setTimeout(function () {
  //设置setTimeout的原因是为了保证<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>先插入到div里，然后去<a href="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>那么src_str就是此<a href="/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("上传图片错误"); } }); } }

注意:

因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究.

html:

接口返回数据格式:

错误代码，0 表示没有错误。 // 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 errno: 0,// data 是一个数组，返回若干图片的线上地址 data: [ '图片1地址','图片2地址','……' ] }

以上这篇js实现图片粘贴上传到服务器并展示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

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

demo1:

demo2:

注意:

html:

猜你在找的JavaScript相关文章