L'éditeur d'événements de glisser implémente l'effet d'image de téléchargement par glisser-déposer

Cette fois, je vous présente l'événement DragÉditeurpour réaliser l'effet du glisser et du téléchargement d'images. Quelles sont les précautions pour utiliser l'éditeur d'événement Drag pour réaliser l'effet du glisser. et le téléchargement de photos. Voici quelques exemples de cas pratiques.

Cette partie permet de télécharger des images dans l'éditeur de ce site

Module Outils de définition Seajs

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

Utilisation :

            //粘贴上传图片
            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 Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation du stockage local de LocalStorage de H5

La mise en œuvre personnalisée peut lire, mettre en pause et progression glisser-déposer, contrôle du volume et lecteur H5 plein écran

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!