html5使用Drag事件编辑器拖拽上传图片的示例代码


Posted in HTML / CSS onAugust 22, 2017

本站的编辑器图片上传便是使用的这部分

Seajs 定义Tools模块

/**
 * Created by zhaojunlike on 8/22/2017.
 */
define(function (require, exports, module) {

    /**
     * 截图粘贴
     * @param selector
     * @param callback
     */
    exports.paste = function (selector, callback) {
        document.querySelector(selector).addEventListener("paste", function (ev) {
            var data = ev.clipboardData;
            var items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (var i in items) {
                var item = items[i];
                //如果是图片
                if (item.kind === 'file' && item.type.indexOf('image') > -1) {
                    var blob = item.getAsFile();
                    var reader = new FileReader();
                    //reader读取完成后,xhr上传
                    reader.onload = function (event) {
                        var base64 = event.target.result;
                        //ajax上传图片
                        //返回一个base64数据
                        var img = {type: item.type, kind: item.kind};
                        if (typeof callback === "function") {
                            callback(event.target.result, img, event);
                        }

                    }; // data url!
                    reader.readAsDataURL(blob);//reader
                }
            }
        });
    };

    /**
     * 拖拽上传
     * @param selector
     * @param callback
     */
    exports.drag = function (selector, callback) {
        var element = document.querySelector(selector);
        element.addEventListener("drop", function (e) {
            e.preventDefault();
            var files = e.dataTransfer.files;
            for (var i = 0; i < files.length; i++) {
                //回调文件
                //alert("Drop " + file[i].name.toString());
                var reader = new FileReader();
                var item = files[i];
                reader.onload = function (event) {
                    var base64 = event.target.result;
                    //返回一个base64数据
                    var img = {type: item.type, name: item.name};
                    if (typeof callback === "function") {
                        callback(event.target.result, img, event);
                    }
                };
                reader.readAsDataURL(files[i]);//reader
            }
            return false;
        });

        element.addEventListener("dragenter", function (e) {
            e.stopPropagation();
            e.preventDefault();
        });

        element.addEventListener("dragover", function (e) {
            e.dataTransfer.dropEffect = "copy";
            e.stopPropagation();
            e.preventDefault();
        });

        document.body.addEventListener("dragover", function (e) {
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    }

    /**
     * 解析粘贴过来的内容,看是否有不是本站的图片,解析出来上传到本站
     */
    exports.parseImg = function () {

    }
});

使用方法:

//粘贴上传图片
            Edtools.paste("#post_content", function (base64, image, event) {
                $.post("{:url('api/uploader/upEditorImg')}",{base:base64}, function (ret) {
                    layer.msg(ret.msg);
                    if (ret.code === 1) {
                        //新一行的图片显示
                        editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")");
                    }
                });
            });

            //拖拽上传图片
            Edtools.drag("#post_content", function (base64, image, event) {
                $.post("{:url('api/uploader/upEditorImg')}",{base:base64}, function (ret) {
                    layer.msg(ret.msg);
                    if (ret.code === 1) {
                        //新一行的图片显示
                        editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")");
                    }
                });
            });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 #HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 #HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 #HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 #HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 #HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 #HTML / CSS
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
新版PHP极大的增强功能和性能
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php 问卷调查结果统计
2015/10/08 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
jquery replace方法去空格
2017/05/08 jQuery
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JavaScript如何判断input数据类型
2020/02/06 Javascript
python3中的md5加密实例
2018/05/29 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python 如何区分return和yield
2020/09/22 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
关键在于落实心得体会
2014/09/03 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Python基础之元类详解
2021/04/29 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL