【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);

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

人已赞赏
JavaScript

【JavaScript】JS中的逻辑运算符&&、||,位运算符|,&

2019-1-23 15:58:15

JavaScript瞎捯饬

【Jquery】点击滑动到指定元素位置

2019-6-26 14:32:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索