IE11,Chrome粘贴图片上传的JS实现方法和逻辑
核心代码如下:
//处理IE11,Chrome粘贴图片上传 function pasteUpload() { var file = null; if(window.clipboardData) { //ie if(clipboardData.files && clipboardData.files.length) { //IE11 file = clipboardData.files[0]; } else if(!clipboardData.getData("text") && !clipboardData.getData("url")) { alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能"); return true; } } else if(e.clipboardData || e.originalEvent) { var clipboardData = (e.clipboardData || e.originalEvent); if(clipboardData.items) { //chrome for(var i = 0; i < clipboardData.items.length; i++) { console.log(clipboardData.items[i]); console.log(clipboardData.items[i].kind); if(clipboardData.items[i].kind === "file") { file = clipboardData.items[i]; break; } } } if(file == null) { if(!clipboardData.getData("url") && !clipboardData.getData("text")) { alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能"); return true; } } } else { alert("暂不支持文件直接复制粘贴"); return true; } if(file) { //获取File Blob //debugger; var blb; if(file.getAsFile) { //Chrome blb = file.getAsFile(); if(blb.size === 0) { alert("不能获取剪切板中的" + (file.type.indexOf("image/") === 0 ? "图像" : "文件") + "\n如果是从OutLook中复制的,请换其他程序,如Word"); return true; } sendfile(blb, file.type); } else { var fr = new FileReader(); if(fr.readAsArrayBuffer) { //ie fr.onloadend = function(evt) { blb = evt.target.result; sendfile(blb, file.type); } fr.readAsArrayBuffer(file); } } function sendfile(b, t) { var xhr = new XMLHttpRequest(); var formData = new FormData(); var isImg = t.indexOf("image/") === 0; var myBlob = new Blob([b], { "type": t }); formData.append('file域', myBlob, "xcwl_clipboard." + t.split('/')[1]); var dir = isImg ? 'image' : 'file'; xhr.open('POST', "上传地址"); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { //上传结果处理 } } xhr.send(formData); } return true; } }