图片上传插件ImgUploadJS：用HTML5FileAPI实现截图粘贴上传、拖拽上传_html5教程技巧

XML/HTML Code复制内容到剪贴板


 
 
 
 
 
new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调 
 
var img = new Image(); 
 
img.src = xhr.responseText; 
 
this.appendChild(img); 
 
}); 




AMD/CMD 
XML/HTML Code复制内容到剪贴板


 
 
 
 
 
 




三.浏览器支持 
当前版本只支持以下，浏览器，后期可能会支持更多浏览器。 
•IE11 
•Chrome 
•FireFox 
•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); 
 
}