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

 更新时间:2024年04月30日 08:31:08   作者:mortimer  
这篇文章主要介绍了使用原生js实现拖拽和粘贴上传图片功能,Vue/Rect 生态用多了都快忘记原生js怎么写了,今天需要直接在服务器裸写个页面,实现 textarea 文本框里接收拖拽多个图片,需要的朋友可以参考下

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


效果

到此这篇关于原生js实现拖拽和粘贴上传图片功能的文章就介绍到这了,更多相关js拖拽和粘贴上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js动态添加删除,后台取数据(示例代码)

    js动态添加删除,后台取数据(示例代码)

    这篇文章主要是对js动态添加删除,后台取数据(示例代码)进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 微信小程序自定义模态框

    微信小程序自定义模态框

    这篇文章主要为大家详细介绍了微信小程序自定义模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 实用框架(iframe)操作代码

    实用框架(iframe)操作代码

    这篇文章主要介绍了实用框架(iframe)操作代码 ,需要的朋友可以参考下
    2014-10-10
  • 一文剖析JavaScript中闭包的难点

    一文剖析JavaScript中闭包的难点

    这篇文章主要为大家详细介绍了JavaScript中闭包的一些难点,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-09-09
  • javascript GUID生成器实现代码

    javascript GUID生成器实现代码

    javascript GUID生成器实现代码, 需要的朋友可以参考下。
    2009-10-10
  • JavaScript中的事件监听详细介绍

    JavaScript中的事件监听详细介绍

    这篇文章主要给大家介绍了关于JavaScript中事件监听的相关资料,在前端开发过程中我们经常会遇到给页面元素添加事件的问题,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 一些常用的JavaScript函数(json)附详细说明

    一些常用的JavaScript函数(json)附详细说明

    一些常用的JavaScript函数(json)附详细说明,学习js的朋友可以参考下。
    2011-05-05
  • js将多维数组转为一维数组后去重排序

    js将多维数组转为一维数组后去重排序

    本文主要介绍了js将多维数组转为一维数组后去重排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • JavaScript中将number转为string的5种方法

    JavaScript中将number转为string的5种方法

    这篇文章主要给大家介绍了关于JavaScript中将number转为string的5种方法,在JavaScript的值类型转换中,最常发生的就是string与number这两种类型值之间的相互转换,需要的朋友可以参考下
    2023-07-07

最新评论