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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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冒泡算法详解(递归实现)
2014/11/10 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python连接数据库的方法
2017/10/19 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
给校长的建议书
2014/03/12 职场文书
法制演讲稿
2014/09/10 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
小学班主任事迹材料
2014/12/17 职场文书
金砖之国观后感
2015/06/11 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang