JavaScript 实现图片拖拽及剪切粘贴上传功能

前言

个人收藏代码，万一哪天用到了呢，我也懒得写，太费脑子，索性直接 Copy 就完事儿了。

拖拽上传

代码依赖 jQuery。
.dragFile 是绑定拖拽事件的容器，如果你需要可以换成你自己的。

//拖拽上传文件
const dragbox = document.querySelector('.dragFile');
dragbox.addEventListener('dragover', function(e) {
    e.preventDefault(); // 必须阻止默认事件
}, false);
dragbox.addEventListener('drop', function(e) {
    e.preventDefault(); // 阻止默认事件
    var file = null,
        data = e.dataTransfer.types;
    for (var i = 0; i < data.length; i += 1) {
        if (data[i] === 'Files') {
            file = e.dataTransfer.files; //获取文件
            break;
        }else{
            var text = e.dataTransfer.getData('text/plain');
            $('.dragFile').append(text); //将拖拽的文字添加到容器里
            break;
        }
    }
    if (file && file[0].type.indexOf('image') !== -1) {
        var formData = new FormData();
        formData.append('file', file[0]); //上传单个文件的添加方式
        upload(formData); //upload 异步上传
    }
}, false);

剪切粘贴上传

这里我碰了许多坑，简单说下吧，因为 getAsString 是回调的结果，如果拿到回调函数的结果呢，当时想了半天，连 Promise 都考虑到了，最后直接把字符追加到容器完事儿。

$(".dragFile").on('paste', function(ev) {
    var file = null,
        data = (event.clipboardData || window.clipboardData).items;
    for (var i = 0; i < data.length; i += 1) {
        if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
            data[i].getAsString(function(str) {
                $('.dragFile').append(str); //容器里追加拷贝的文字
            })
            break;
        } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
            file = data[i].getAsFile(); //读取图片文件
            break;
        }
    }
    if (file) {
        var formData = new FormData();
        formData.append('file', file); //上传单个文件的添加方式
        upload(formData); //异步上传文件
    }
}); 

AJAX 异步上传

这个东西当然是最简单的了。

function upload(formData) {
    if (formData.length < 1) {
        return; //阻止上传，也可以写提示语
    }
    $.ajax({
        url: 'upload', //上传的路径
        type: "POST",
        data: formData,
        processData: false, //阻止 jQuery 序列化
        contentType: false,
        dataType: "json", //返回格式
        beforeSend: function() { 
            //这里可以加一些上传前的特效，用于改善用户体验
        },
        success: function(res) {
            console.table(res);
            if (res.code) {
              //上传成功后的事件
            } else {
               //上传失败的事件
                alert(res.msg);
            }
        },
        complete: function() {
           //上传完成后的事件
        },
        error: function(res) {
            console.log(res);
        }
    });
}