您好,登錄后才能下訂單哦!
Drag事件編輯器如何實(shí)現(xiàn)拖拽上傳圖片的效果?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
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上傳圖片 //返回一個(gè)base64數(shù)據(jù) 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++) { //回調(diào)文件 //alert("Drop " + file[i].name.toString()); var reader = new FileReader(); var item = files[i]; reader.onload = function (event) { var base64 = event.target.result; //返回一個(gè)base64數(shù)據(jù) 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; }); } /** * 解析粘貼過(guò)來(lái)的內(nèi)容,看是否有不是本站的圖片,解析出來(lái)上傳到本站 */ 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 + ")"); } }); });
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)Drag事件編輯器如何實(shí)現(xiàn)拖拽上傳圖片的效果大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。