mirror of https://github.com/helloxz/imgurl.git
5 changed files with 131 additions and 15 deletions
@ -0,0 +1,112 @@ |
|||||||
|
'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; |
||||||
|
})); |
||||||
Loading…
Reference in new issue