使用原生js实现拖拽和粘贴上传图片功能_Javascript

vue/rect 生态用多了都快忘记原生js怎么写了，今天需要直接在服务器裸写个页面，实现 textarea 文本框里接收拖拽多个图片，同时能直接粘贴截图上传，使用一些现成的框架倒是分分钟完成，但要直接裸写，还是费了思量。

html中的textarea元素

<textarea  id="textarea" placeholder="可拖拽图片到此上传，或截图后在此粘贴"></textarea>

实现思路：

无论是拖拽上传，还是粘贴上传，本质都是使用 formdata 包装 file数据，传递给服务器，关键点是取到file或blob数据。

在拖拽时，可在 drop 放下动作时，通过event.datatransfer.files获取到文件数据。

在粘贴监听 paste 事件时，可通过event.clipboarddata.items获取到剪切板中的第一个blob数据，然后调用blog的getasfile转为file。

再判断他们的mime类型如果是图片，则上传。

先实现上传函数

使用原生xhr实现，无它，简单。

假设服务器返回json格式数据

code=0代表上传成功，返回url地址，code=其他失败，msg字段填充失败信息

// 接口 file或 blob类型数据
const uploadimg=function(file){
    // 创建 formdata 对象
    var formdata = new formdata();

    // 添加图片文件到表单数据中
    formdata.append('file', file);

    // 创建 xmlhttprequest 对象
    var xhr = new xmlhttprequest();

    // 设置上传完成后的回调函数
    xhr.onload = function() {
        if (xhr.status == 200) {
            try {
                // 解析服务器返回的json数据 {code:0,msg:msg}
                var response = json.parse(xhr.responsetext);
                if (response && response.code === 0) {      

                } else {
                    console.error('error uploading image: ' + response.msg);
                }
            } catch (e) {
                console.error('error parsing server response as json');
            }

        } else {
            console.log('error uploading image');
        }
    };    
    xhr.onerror=function(){
        console.log('error')
    }
    xhr.open('post', '/index/upload', true);
    // 发送图片文件数据
    xhr.send(formdata);
}

为 textarea 绑定拖拽事件函数

在拖拽进入textarea区域时，动态添加一个outline边框，以便区分。

// 元素
var textarea = document.getelementbyid('textarea');
        
// 拖拽到上方时，添加一个 outline 样式
var addoutline = function() {
    textarea.style.outline = "2px solid #0000ff";
};
        
// 松开时，移除outline 样式
var removeoutline = function() {
    textarea.style.outline = "";
};
        
// 当有图片拖拽进入区域时添加outline
textarea.addeventlistener('dragenter', function(event) {
    event.stoppropagation();
    event.preventdefault();
    addoutline();
});
        
// 文件在区域内移动时防止浏览器默认行为
textarea.addeventlistener('dragover', function(event) {
    event.stoppropagation();
    event.preventdefault();
});
        
// 文件离开区域时移除边框
textarea.addeventlistener('dragleave', function(event) {
    event.stoppropagation();
    event.preventdefault();
    removeoutline();
});
        
// 文件放下时进行处理
textarea.addeventlistener('drop', function(event) {
    event.stoppropagation();
    event.preventdefault();
    removeoutline();

    // 获取文件列表
    var files = event.datatransfer.files;
    if (files.length > 0) {
        // 遍历处理所有图片
        [].foreach.call(files,function(file){
           if(file.type.match('image.*')){ 
               uploadimg(file);
           }
        })
    }
});

绑定粘贴处理函数

再监听粘贴事件，获取剪切板中第一个数据。

// 粘贴处理函数
textarea.addeventlistener('paste', function(event) {
    // 阻止默认行为
    event.preventdefault();

    // 只检查第一个数据，是否是图片类型
    if (event.clipboarddata && event.clipboarddata.items) {
        var items = event.clipboarddata.items;
        let i=0;
        // 如果找到图片类型
        if (items[i].type.indexof('image') !== -1) {
            var blob = items[i].getasfile();
            uploadimg(blob);
        }
    }
});
}