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的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP教程 预定义变量
2009/10/23 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
javascript判断office版本示例
2014/04/11 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
原生js实现分页效果
2020/09/23 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
python中partial()基础用法说明
2018/12/30 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python上selenium的弹框操作实现
2020/07/13 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
项目计划书范文
2014/01/09 职场文书
年终考核评语
2014/01/19 职场文书
网站推广策划方案
2014/06/04 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript