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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
解析strtr函数的效率问题
2013/06/26 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
关于php中一些字符串总结
2016/05/05 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
pandas修改DataFrame列名的方法
2018/04/08 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
django和flask哪个值得研究学习
2020/07/31 Python
python反扒机制的5种解决方法
2021/02/06 Python
python如何实现递归转非递归
2021/02/25 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
爱心捐款倡议书
2014/04/14 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电