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的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
python文件操作整理汇总
2014/10/21 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python常用知识点汇总
2016/05/08 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python线性回归实战分析
2018/02/01 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
手机销售员岗位职责
2015/04/11 职场文书
培训通知
2015/04/17 职场文书
工程款催款函
2015/06/24 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL