Der Drag-Event-Editor implementiert den Drag-and-Drop-Upload-Bildeffekt

Dieses Mal bringe ich Ihnen den Drag-Ereignis-Editorum die Wirkung des Ziehens und Hochladens von Bildern zu erkennen. Was sind die Vorsichtsmaßnahmen für die Verwendung des Drag-Ereignis-Editors, um die Wirkung des Ziehens zu erkennen? und Hochladen von Bildern. Werfen wir einen Blick auf praktische Fälle.

Dieser Teil wird zum Hochladen von Bildern im Editor dieser Website verwendet

Seajs Definition Tools-Modul

/**
 * 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 () {
    }
});

Verwendung:

            //粘贴上传图片
            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 + ")");
                    }
                });
            });

I Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der lokalen Speichernutzung von H5s LocalStorage

Benutzerdefinierte Implementierung kann abspielen, anhalten und Fortschritt per Drag & Drop, Lautstärkeregelung und Vollbild-H5-Player

Das obige ist der detaillierte Inhalt vonDer Drag-Event-Editor implementiert den Drag-and-Drop-Upload-Bildeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!