一个简易的拖拽上传文件和粘贴截图，可扩展

BetaRabbit 发布于2019-08-23 11:49 / 1385人阅读

摘要：准备工作首先来一个可编辑的和一些简单的样式来封装两个方法获取到操作的文件文件转为抛出开始拖拽文件要使用到的三个相关事件，分别是，，当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发事件。

准备工作 首先来一个可编辑的div和一些简单的样式

来封装两个方法

    function init({el, callback}){ // 获取到操作的文件
        
    }
    function fileToBase64(file, callback){ // 文件转为base64抛出
        
    }
    window.init = init;

开始 拖拽文件

要使用到的三个相关事件，分别是： dragover， drop， dragleave

当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件。

当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，触发drop事件

被拖动的元素或文本选区移出有效释放目标区 drop 元素在有效释放目标区上释放, 触发dragleave事件

我们可以在dragover和dragleave来处理拖动当当前位置和拖动完成后或离开的样式。在drop事件回调来处理要上传的文件

     function init({el, callback}){ 
        const upBox = document.querySelector(el);
        if(!upBox){return};
        
        // 拖拽
        
        upBox.addEventListener("dragover", dragoverFile)
        upBox.addEventListener("drop", dropFile)
        upBox.addEventListener("dragleave", dragleaveFile)
        function dragoverFile(e) {
            e.preventDefault();
        }
        function dragleaveFile(e) {
           
        }
        function dropFile(e) {
            e.preventDefault();
            let fileList = e.dataTransfer.files;
            let file = fileList[0];
            // 在这里就可以拿到拖拽的文件了，传到下一个函数进行处理
            fileToBase64(file, callback)
        }
    }

粘贴

粘贴的话用到的事件就是 paste 了

     function init({el, callback}){ 
        const upBox = document.querySelector(el);
        if(!upBox){return};
        
        // 拖拽
        
        upBox.addEventListener("dragover", dragoverFile)
        upBox.addEventListener("drop", dropFile)
        upBox.addEventListener("dragleave", dragleaveFile)
        function dragoverFile(e) {
            e.preventDefault();
        }
        function dragleaveFile(e) {
           
        }
        function dropFile(e) {
            e.preventDefault();
            let fileList = e.dataTransfer.files;
            let file = fileList[0];
            // 在这里就可以拿到拖拽的文件了，传到下一个函数进行处理
            fileToBase64(file, callback)
        }
        
        // 粘贴
        upBox.addEventListener("paste", pasteFile)
        function pasteFile(e) {
            e.preventDefault();
            const items = e.clipboardData.items;
            for( let i=0; i
这里并不能粘贴文件
最后把文件转成base64
    function fileToBase64(file, callback){
        // 实例化一个FileReader对象， 当读取完成文件时，把base64抛出
        const reader = new FileReader();
        reader.onload = function(e){
            callback(e.target.result)
        }
        reader.readAsDataURL(file);
    }
最后
写的比较简单，只是列出了大概思路，实际业务呢，还是要扩展好多的。

GPU云服务器云服务器 Live的拖拽 js实现数据的拖拽 php拖拽上传大文件 java表单可拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97532.html

html5使用Drag事件编辑器拖拽上传图片

摘要：使用场景图片的拖拽指定区域进行上传图片粘贴进行上传功能核心参考案例代码定义模块截图粘贴如果是图片读取完成后，上传上传图片返回一个数据拖拽上传回调文件返回一个数据解析粘贴过来的内容，看是否有不是本站的图片解析出来上传到本站使用方法粘贴上传图使用场景图片的拖拽指定区域进行上传图片粘贴进行上传功能核心api参考 File clipboardData 案例代码 Seajs 定义To...

My_Oh_My 2019-08-20 18:52 评论0 收藏0
可视化拖拽 UI 布局之拖拽篇

前言：前段时间负责公司的运营管理后台项目，通过运营后台的PC端拖拽配置布局，达到App首页模板的动态UI界面配置，生成页面。趁着周末，整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发，欢迎点赞关注或者收藏一波[鞠躬]。之前在掘金一篇文章里看到这段话: UI 开发的三种模式 1.手写标签和样式代码，生成页面 2.可视化拖拽 ...

ACb0y 2019-08-22 13:58 评论0 收藏0
全局拖拽上传文件（类似百度网盘）的实现及踩坑

摘要：记录下，开发需求是实现一个类似百度网盘全局拖拽的功能兼容浏览器，以上。监听上的事件，显示拖拽的蒙层监听目标节点上的拖拽事件。记录下，开发需求是实现一个类似百度网盘全局拖拽的功能,兼容浏览器，IE0以上。实现思路是，采用原声的拖拽事件。监听window上的dragenter事件，拖拽目标节点是fixed罩住页面的dropZone节点。监听window上的dragenter事件，显示...

shiguibiao 2019-08-26 11:41 评论0 收藏0
【在网页中获取截图数据】Chrome和Firefox下的实战经验

摘要：最近在实现一个功能，需求如下前提当前页面无弹窗页面任意位置执行粘贴读取剪切板中的截屏数据上传截图首先还是从网上找相关的例子。找到了上的专栏文章获取剪切板内容，控制图片粘贴。最近在实现一个功能，需求如下：前提：当前页面无弹窗页面任意位置执行粘贴读取剪切板中的截屏数据上传截图首先还是从网上找相关的例子。找到了SF上的专栏文章《js获取剪切板内容，js控制图片粘贴》。于是...

vslam 2019-08-19 17:49 评论0 收藏0