【JavaScript】JS实现剪切板图片粘贴直接上传

最近有在写一个wordpress粘贴上传的插件

但是遇到了一些小问题,在粘贴较为丰富的图像数据时Base64数据会比较长

在上传数据的过程中会出现502错误

这里记录一下另外一种方式

获取剪切板中的图片信息

document.addEventListener('paste', function(event) {
    var items = (event.clipboardData && event.clipboardData.items) || [];
    var file = null;
 
    if (items && items.length) {
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    }
});
//一定不要用数组的find方法去查找图片item,因为items是一个伪数组,并没有find方法

将文件转换为二进制数(formdata)

var formData = new FormData();
formData.append('file', file);

接下来上传文件

var xhr = new XMLHttpRequest();
xhr.onload = function () {
  try {
    // 取得响应消息
    var result = JSON.parse(this.responseText);
  } catch(err) {
    console.log(err)
  }
};
xhr.open('POST', './upload_file.php', true);
xhr.send(formData);

仅支持截图后的粘贴,暂时不支持复制文件的粘贴

版权声明:
作者:暴打小盆友
链接:https://wandhi.com/post-873.html
来源:玩的嗨
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>