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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
CSS实现鼠标悬浮动画特效
May 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
php 在文件指定行插入数据的代码
2010/05/08 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js控制框架刷新
2008/08/01 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
优秀员工获奖感言
2014/03/01 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
会计入职心得体会
2016/01/22 职场文书