npm

Need private packages and team management tools?Check out npm Orgs. »

ctrv-upload

1.0.2 • Public • Published

背景

最近公司要做一个ctrl+V 上传图片的组件。简单说就是,使用截屏工具截一张图,然后在某个元素上按ctrl+v操作,需要将截的图上床至服务端,服务端保存图片并返回对应的地址;所以封装了组件做这事,发布出来记录下。

ctrv-upload

手动截屏后,鼠标移动至某元素,按ctrlv进行图片上传。

兼容性说明

由于代码中使用到clipboardData对象及paste事件,目前只能兼容到高版本Chrome,FireFox及IE 11。

实现原理及过程

原理:

  • 对于webkit内核,input、textarea、contentEditable属性为true的元素可响应paste事件,可通过事件对象中的clipboardData对象属性访问粘贴板数据。
  • 对于FireFox及IE 11,在contentEditable属性为true的元素上进行ctrl+v操作时,会在目标元素中插入img元素,img元素的src属性即为截图的base64数据。
  • 获取到图片的base64数据后提交给后台程序php,可在服务端保存为图片。

实现过程

  1. 在目标元素前插入contentEditable属性为true的div元素,用于响应paste事件;
  2. 在目标元素上做ctrl+v操作时,响应paste事件,通过event.clipboardData对象或者获取在目标元素中插入的img元素得到图片的base64数据。
  3. ajax上传图片base64数据至服务端。

安装

npm install ctrv-upload

使用

支持AMD与CommonJs的方式加载模块, 直接引入:<script src="xxx/ctrv-upload/index.js"> AMD: define(['xxx/ctrv-upload/index'],function(ctrlVUtil){}); COMMONJS: var ctrlVUtil = require("ctrv-upload");

调用



var load1 = document.querySelector(".js-upload");

// 实例化即可
new ctrlVUtil({
    uploadUrl: "server.php",
    targetElement: load1,
    isCompleteImg:false,
    data:{
        name:"alanzhang"
    },
    success:function(data){
        alert("上传成功");
        console.log(data);
    },
    error: function(error){
        alert("上传失败");
    }
});

参数说明

名称 参数 默认值
uploadUrl 上传地址 需自定义
targetElement 鼠标放在该元素上时,可响应ctrl+v操作 document.querySelector(".js-upload")
isCompleteImg 上传图片base64的格式,false表示只上传content部分,即不包括头信息data:image/jpg;base64,true表示上传完整的base64字符串 false
data 需要上传的其他参数,json对象
success 上传成功时的回调函数,其参数为接口返回的json对象 -
error 上传成功时的回调函数,其参数为接口返回的json对象 -

API

ctrlVUtil(config)

构造函数,参数:

  • config: 上传图片的相关参数,json对象,具体字段见参数说明。

ctrlVUtil#alertMsg(content)

静态方法,用于弹出异常信息的提示,默认使用window.alert(content)弹出提示;提供此方法用于使用者自定义弹出提示的样式。

  • content:组件给出的异常提示信息

开发

  1. 源码位于src/index.js,开发完成后执行webpack打包,生成根目录下的index.js。
  2. 实例项目examples中ctrlVMain.js中引用了根目录下的index.js文件,在运行测试文件时也许进行gulp打包操作。

版本记录

1.0.2 2016-08-22

  • 修正readme

1.0.1 2016-08-22

  • 修正readme

1.0.0 2016-08-22

  • 初始化版本,完成代码及文档

参考文档

Keywords

install

npm i ctrv-upload

Downloadsweekly downloads

1

version

1.0.2

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability