当前位置:首页 > 前端

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

Z先生8年前 (2018-10-12)前端985

核心代码如下:

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


分享给朋友:

相关文章

ColorUI色系

ColorUI色系

                          …

MUMU模拟器调试APP注意事项

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

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

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

无意间发现了微信的这个链接,这几天比较忙,暂时还没有测试,等空了再测试一下。…

js获取指定文件的路径

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

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

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

VUE/UNIAPP事件传参

第一种方式使用data<view @click="handleClick" data-info="大家好">点击按钮</v…

发表评论

访客

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