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

 /** * 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 

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