原生js实现拖拽和粘贴上传图片

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


html中的textarea元素

bash 复制代码
<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字段填充失败信息

javascript 复制代码
// 接口 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边框,以便区分。

scss 复制代码
// 元素
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);
           }
        })
    }
});
 

绑定粘贴处理函数

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

csharp 复制代码
// 粘贴处理函数
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);
        }
    }
});
}

效果

相关推荐
xiaoyan20159 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin27 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20182 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js