不依赖后端,复制粘贴截图上传

1. 制造一个可复制粘贴的区域

<input type="text" id="upzone">

2. 监听onpaste,获取截图数据

ipt.onpaste = function(evt) {
    var clipboardData = evt.clipboardData,
        imgData = clipboardData.items[0],
        file = imgData.getAsFile();
};

3. 上传

var fd = new FormData(),
    xhr = new XMLHttpRequest();
fd.append("filekey", file, "filename.png");
xhr.open("post", "/upload");
xhr.send(fd);

3. 可从文件生成base64,直接展示在页面上

var reader = new FileReader();
reader.onload = function() {
    var base64Str = this.result;
    console.log(base64Str);
};
reader.readAsDataURL(file);

  

原文地址:https://www.cnblogs.com/defghy/p/5570341.html