在线文档教程

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