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

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

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

核心代码如下:

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


分享给朋友:

相关文章

AJAX实现跨域的三种方法

三种方法:代理、JSONP、XHR2(XMLHttpRequest Level 2)一、代理:这种方式是通过服务器获取其他域名下的内容,然后再把获得内容返回到前端,这样因为在同一个域名下,所以就不会出...

【原创】api接口模拟器(NodeJS版)

最近遇到一个项目,内网的APP,后端数据和前段开发属于异地,没法直接做接口数据测试。因此用NodeJs简单写了个API模拟器,只要将响应的数据放在对应目录下json.json文件中即可。请求地址全静态...

微信小程序强制热更新

微信小程序强制热更新

微信小程序分为冷启动和热启动,在更新后,一般需要一个周期,用户端才会重新更新。官方从小程序基础库版本1.9.90开始支持强制更新异步更新 + 强制更新方案介绍从基础库 1.9.90 开始,我们提供了&...

微信html链接小程序原始写法(暂未测试)

微信html链接小程序原始写法(暂未测试)

无意间发现了微信的这个链接,这几天比较忙,暂时还没有测试,等空了再测试一下。<a class="weapp_text_link"   &nbs...

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

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

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

js获取指定文件的路径

获取指定js文件的路径var src = '/static/js/demo.js'; var path = src.sub...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。