本站的編輯器圖片上傳便是使用的這部分
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"); } }); }); //拖拽上傳圖片 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"); } }); });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答