当前位置:首页 > 前端 > 正文内容

IE11,Chrome粘贴图片上传的JS实现方法和逻辑

Z先生7年前 (2018-10-12)前端867

核心代码如下:

//处理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;
	}
}


分享给朋友:

相关文章

小程序二维码传参处理&UNIAPP H5传参兼容处理

首先小程序生成二维码,我这里调用的接口是:getUnlimited,我传递的参数是:invite=10001接着就是小程序中处理,如果直接扫二维码在App.vue的onLaunch中,使用decode...

简易CSS3仿照微信对话框

惯例,直接上代码HTML代码:<div class="say-box say-left"> <div class="s...

MUMU模拟器调试APP注意事项

MUMU模拟器默认ADB端口7555,所以要么修改MUMU默认端口,要么修改IDE编辑器链接端口为7555。做好这个MARK!...

npm删除掉所有模块并重新安装的方法

1、删除目录:node_modules2、运行清理命令npm cache clean -f3、安装npm install...

写给即将寿终正寝的Flash,即html5 Flash解决方案

写给即将寿终正寝的Flash,即html5 Flash解决方案

Adobe的Flash将于2020年12月31日正式终止。Adobe公司最近宣布,将会正式宣布停止对Flash的支持,这也变相宣布了Flash的死亡,Flash Player将于2020年12月31日...

记vue/uniapp本地调试以及部署代理服务器设置哪些事

接触vue差不多也一年有余,很多概念性的东西都不懂,逐步已经习惯了npm来安装,之前其他同事做的一些项目,npm自己拿过来也踩了很多坑,比如换个环境再npm就跑不起来了等等之类的,遇到最多的就是scs...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。
请先 登录 再评论,若不是会员请先 注册