本站的编辑器图片上传便是使用的这部分
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 + ")"); } }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
30款免费高质量的英文丝带字体下载 对有个性的字体,设计师们总是会毫不犹豫的收...
在大量搜索和摸索后,终于成功。总结如下:(再次感谢网络中文章) 1、便Dreamwe...
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...
使用css的filter写鼠标滑过效果 div class=filter-div img class=filter-img src...
原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口,亦有H...
思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子...
一直以来,写日常问题、前沿技术和架构思考类的文章比较多,今天为什么突然来说...
菜品是外卖交易过程的核心要素,对菜品的理解也是实现外卖供需匹配的重点。今天...
在设置display:flex,justify-content: space-betweend的时候,它会把子元素靠边...
1. CSS拾遗之图标 图标有三种制作方法: 图片 css(小箭头用CSS搞定) 自己画font(...