Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ctrv-upload with all npm packages installed. Try it out:

var ctrvUpload = require("ctrv-upload")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ctrv-upload v1.0.2

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

##背景 最近公司要做一个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

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

参考文档

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free