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

