js封装截图粘贴到input
html
<input type="text" name="ico" value="" id="imgico" placeholder="测试" >
js多个
document.getElementById('imgico').addEventListener( 'paste', function( e ){
clipboardData(e.clipboardData,'{:url("upload/upfile")}','#imgico')
});
封装函数
function clipboardData(e,url,id){
var clipboardData = e;
var i = 0;
var items, item, types;
if( clipboardData ){
items = clipboardData.items;
if( !items ){
return;
}
item = items[0];
types = clipboardData.types || [];
for( ; i < types.length; i++ ){
if( types[i] === 'Files' ){
item = items[i];
break;
}
}
console.log(clipboardData);
// 判断是否为图片
if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
imgReader(item,url,id);
}
}
}
function imgReader(item,url,id){
var blob = item.getAsFile(),
reader = new FileReader();
reader.onload = function( e ){
var img = new Image();
img.src = e.target.result;
sumitImageFile(img.src,url,id);
};
reader.readAsDataURL( blob );
}
function sumitImageFile(base64Codes,url,id){
var form=document.forms[0];
var formData = new FormData(); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
formData.append("file",convertBase64UrlToBlobpic(base64Codes),"截图粘贴.jpg");
$.ajax({
url : url,
type : "POST",
data : formData,
dataType:"text",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(res){
obj = JSON.parse(res);
if (obj.code == '200') {
$(id).val(obj.path);
return layer.msg('粘贴成功');
} else {
return layer.msg('粘贴失败');
}
},
xhr:function(){ //在jquery函数中直接使用ajax的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log("正在提交."+percentComplete.toString() + '%'); //在控制台打印上传进度
}
}, false);
return xhr;
}
});
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlobpic(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/jpg'});
}