mirror of https://github.com/helloxz/imgurl
112 lines
4.2 KiB
JavaScript
112 lines
4.2 KiB
JavaScript
'use strict';
|
||
(function(root, factory){
|
||
if (typeof define === 'function' && define.amd) {
|
||
define([], factory);
|
||
} else if (typeof exports === 'object') {
|
||
module.exports = factory();
|
||
} else {
|
||
root.ctrlVUtil = factory();
|
||
}
|
||
}(this, function(){
|
||
function ctrlVUtil(option){
|
||
this.targetElement = null;
|
||
this.uploadInput = null;
|
||
this.uploadUrl = "http://www.oa.com/screenshot/create-file";
|
||
this.isCompleteImg = false;
|
||
var that = this;
|
||
that.mixinConfig(option);
|
||
that.targetElement.addEventListener("mouseover", function() {
|
||
that.uploadInput.focus();
|
||
});
|
||
that.targetElement.addEventListener("click", function() {
|
||
that.uploadInput.focus();
|
||
});
|
||
that.targetElement.addEventListener("mouseleave", function() {
|
||
that.uploadInput.blur();
|
||
});
|
||
that.uploadInput.addEventListener('paste', function(e) {
|
||
that.handlePaste(e);
|
||
});
|
||
}
|
||
ctrlVUtil.prototype.mixinConfig = function(option){
|
||
this.targetElement = option.targetElement || document.querySelector(".js-upload");
|
||
this.uploadInput = this.createInputTarget();
|
||
this.isCompleteImg = "isCompleteImg" in option ? option.isCompleteImg : this.isCompleteImg;
|
||
this.uploadUrl = option.uploadUrl || this.uploadUrl;
|
||
this.data = option.data;
|
||
this.success = option.success || function(data) {
|
||
console.log(data);
|
||
};
|
||
this.error = option.error || function(error) {
|
||
console.log(error);
|
||
};
|
||
};
|
||
ctrlVUtil.prototype.createInputTarget = function() {
|
||
var imgContinaer = document.createElement("div");
|
||
imgContinaer.style.cssText = "border:none;margin:0;padding:0;font-size: 0;height:1px;width:1px;opacity:0;position:fixed;z-index:-1;";
|
||
imgContinaer.contentEditable = true;
|
||
imgContinaer.class = "ui-ctrlv-uploadInput";
|
||
this.targetElement.parentNode.insertBefore(imgContinaer, this.targetElement);
|
||
return imgContinaer;
|
||
};
|
||
ctrlVUtil.prototype.handlePaste = function(e){
|
||
var that = this;
|
||
if (e && e.clipboardData && e.clipboardData.items) {
|
||
var item = e.clipboardData.items[0],
|
||
that = this;
|
||
if (item.type.indexOf('image') != -1) {
|
||
var blob = item.getAsFile();
|
||
var fileReader = new FileReader();
|
||
fileReader.readAsDataURL(blob);
|
||
fileReader.addEventListener('load', function(e) {
|
||
var file = e.target.result;
|
||
that.send(file);
|
||
}, false);
|
||
} else {
|
||
layer.msg('请粘贴image类型！');
|
||
}
|
||
} else {
|
||
setTimeout(function() {
|
||
var $img = that.uploadInput.querySelector("img");
|
||
if ($img) {
|
||
that.send($img.src);
|
||
} else {
|
||
layer.msg('当前浏览器不支持剪贴板操作！');
|
||
return;
|
||
}
|
||
}, 200);
|
||
}
|
||
};
|
||
ctrlVUtil.prototype.send = function(imgcontent) {
|
||
layer.load();
|
||
var that = this;
|
||
that.uploadInput.innerHTML = "";
|
||
var data = that.data || {};
|
||
data.content = this.isCompleteImg ? imgcontent : imgcontent.split(';')[1].split(',')[1];
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("post",that.uploadUrl,true);
|
||
xhr.onreadystatechange = function(e) {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
var ret = JSON.parse(xhr.responseText);
|
||
that.success && that.success(ret);
|
||
} else {
|
||
that.error && that.error(e, xhr);
|
||
}
|
||
}
|
||
};
|
||
xhr.onerror = function(e) {
|
||
that.error && that.error(e, xhr);
|
||
};
|
||
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||
var dataString = [];
|
||
for(var key in data){
|
||
dataString.push(key+"="+encodeURIComponent(data[key]));
|
||
}
|
||
xhr.send(dataString.join("&"));
|
||
};
|
||
ctrlVUtil.prototype.alertMsg = function(content){
|
||
alert(content);
|
||
}
|
||
return ctrlVUtil;
|
||
})); |