您好,登錄后才能下訂單哦!
小編給大家分享一下html5如何使用Drag事件編輯器拖拽上傳圖片,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
本站的編輯器圖片上傳便是使用的這部分
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數(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; //返回一個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; }); } /** * 解析粘貼過來的內(nè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 + ")"); } }); });
以上是“html5如何使用Drag事件編輯器拖拽上傳圖片”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。