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

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

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

核心代码如下:

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


分享给朋友:

相关文章

Ckeditor踩坑记

说实话,用了很多富文本编辑器,最精益求精的还是Ckeditor! 曾经一度依赖于百度的Ueditor,因为其简单,方便;特别是在图片上传、H5上传、远程文件下载支持这三个方面,表现尤为突出!...

npm如何使用国内镜像源?

通过命令配置1. 命令淘宝源npm config set registry https://registry.npmmirror.com腾讯源npm ...

MUMU模拟器调试APP注意事项

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

npm 更新模块

npm update只能按照package.json中标注的版本号进行更新,升级后不会修改package.json中的版本号,需要自己手动修改,比较麻烦。npm-check-updates 升级插件升...

VUE/UNIAPP事件传参

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

发表评论

访客

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