当前位置:首页 > 前端

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

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

核心代码如下:

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


分享给朋友:

相关文章

H5模拟微信菜单下拉菜单

H5模拟微信菜单下拉菜单

核心HTML代码:核心点:外层类“submenu-warp”子菜单类:“submenu”<div data-href="#mainurl" class=&…

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

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

MUMU模拟器调试APP注意事项

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

uniapp无缝滚动核心代码

1、页面代码核心代码<scroll-view class="scoll-warp">     <view&nb…

uniapp开发小程序,小程序二维传参与H5、分享页面参数兼容的处理方案。

首先小程序获取二维码接口有三个,2个限制数量,一个不限制数量,但是限制生成频率(5000次/分钟)和参数长度(32位),我使用的是不限数量的接口:getUnlimited,传递的参数为:invite=…

发表评论

访客

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