• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5使用Drag事件编辑器拖拽上传图片的示例代码

    本站的编辑器图片上传便是使用的这部分

    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 + ")");
                        }
                    });
                });
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
    下一篇:HTML5中的拖放实现详解
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5使用Drag事件编辑器拖拽上传图片的示例代码 html5,使用,Drag,事件,编辑器,