html拖拽事件上传,html5使用Drag事件编辑器拖拽上传图片的示例代码

阳光穿透心脏的1/2处 2022-10-06 11:53 203阅读 0赞

本站的编辑器图片上传便是使用的这部分

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 + ")");

\});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

html拖拽事件上传,html5使用Drag事件编辑器拖拽上传图片的示例代码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 H5--drag拖拽事件

相关详解Html5关于拖拽（Drag 和 drop）的使用和事件

相关 HTML5拖拽文件上传

相关 html5学习(文件拖拽上传)

相关 html拖拽事件上传,html5使用Drag事件编辑器拖拽上传图片的示例代码

相关 HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

相关拖拽上传图片--文件

相关 html5+express实现拖拽上传

相关拖拽上传图片(只能上传单张)

相关 HTML5——drag拖拽