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'});  
}  


评论