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


Posted in Javascript onNovember 08, 2017

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

demo1:

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) {
       //getAsFile() 此方法只是living standard firefox ie11 并不支持
       blob = items[i].getAsFile();
       uploadImgFromPaste(blob, 'paste', isChrome);
      }
     }

     /*if ( blob !== null ) {
      var reader = new FileReader();
      reader.onload = function (event) {
       // event.target.result 即为图片的Base64编码字符串
       var base64_str = event.target.result;//获得图片base64字符串
       //可以在这里写上传逻辑 直接将base64编码的字符串上传(可以尝试传入blob对象,看看后台程序能否解析)
      uploadImgFromPaste(base64_str, 'paste', isChrome);
      }
      reader.readAsDataURL(blob);//传入blob对象,读取文件
     }*/
    } else {
     //for firefox
     setTimeout(function () {
      //设置setTimeout的原因是为了保证图片先插入到div里,然后去获取值
      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 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
        src_str = imgList[i].src;
       }
      }
      uploadImgFromPaste(src_str, 'paste', isChrome);
     }, 1);
    }
   } else {
    //for ie11
    setTimeout(function () {
     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 = imgList[i].src;
      }
     }
     uploadImgFromPaste(src_str, 'paste', 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'),
        len = imgList.length,
        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:

// 处理粘贴事件
  $("#aaa").on('paste', function(eventObj) {
   // 处理粘贴事件
   var event = eventObj.originalEvent;
   var imageRe = new RegExp(/image\/.*/);
   var fileList = $.map(event.clipboardData.items, function (o) {
    if(!imageRe.test(o.type)){ return }
    var blob = o.getAsFile();
    return blob;
   });
   if(fileList.length <= 0){ return }
   upload(fileList);
   //阻止默认行为即不让剪贴板内容在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:

<div id="aaa" contentEditable="true" style="height:800px;border:1px solid #ccc"></div>

接口返回数据格式:

{
 // errno 即错误代码,0 表示没有错误。
 //  如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
 errno: 0,

 // data 是一个数组,返回若干图片的线上地址
 data: [
  '图片1地址',
  '图片2地址',
  '……'
 ]
}

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

Javascript 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
js实现表格字段排序
Feb 19 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 #Javascript
vue-router路由与页面间导航实例解析
Nov 07 #Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 #Javascript
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
You might like
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python新手学习raise用法
2020/06/03 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
设计部经理的岗位职责
2013/11/16 职场文书
家长建议怎么写
2014/05/15 职场文书
企业总经理任命书
2014/06/05 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书