本站的編輯器圖片上傳便是使用的這部分
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 + )); } }); });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。