•Safari(未测式,理论应该支持)
四.原理及源码
1.粘贴上传
处理目标容器(id)的paste事件,读取e.clipboardData中的数据,如果是图片进行以下处理:
用H5 File API(FileReader)获取文件的base64代码,并构建FormData异步上传。
2.拖拽上传
处理目标容器(id)的drop事件,读取e.dataTransfer.files(H5 File API: FileList)中的数据,如果是图片并构建FormData异步上传。
以下是初版本代码,比较简单。不再赘述。
部份核心代码
XML/HTML Code复制内容到剪贴板
function UploadImage(id, url, key)
{
this.element = document.getElementById(id);
this.url = url; //后端处理图片的路径
this.imgKey = key || "PasteAreaImgKey"; //提到到后端的name
}
UploadImage.prototype.paste = function (callback, formData)
{
var thatthat = this;
this.element.addEventListener(‘paste’, function (e) {//处理目标容器(id)的paste事件
if (e.clipboardData && e.clipboardData.items[0].type.indexOf(‘image’) > -1) {
var that = this,
reader = new FileReader();
file = e.clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据:Blob对象
reader.onload = function (e) { //reader读取完成后,xhr上传
var xhr = new XMLHttpRequest(),
fd = formData || (new FormData());;
xhr.open(‘POST’, thatthat.url, true);
xhr.onload = function () {
callback.call(that, xhr);
}
fd.append(thatthat.imgKey, this.result); // this.result得到图片的base64
xhr.send(fd);
}
reader.readAsDataURL(file);//获取base64编码
}
}, false);
}









