图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果

当前互联网上传文件最多的就是图片文件了，但是传统web图片的截图上传需要：截图保存->选择路径->保存后再点击上传->选择路径->上传->插入。
图片文件上传也需要：选择路径再->上传->插入，步骤繁杂，互联网体验为王，如果支持截图粘贴上传、拖拽上传将大大提升体验。
当前知乎和github对现代浏览器均支持这两种特性，闲来无事就学习实现了一下，今天就说一说这个1kb插件实现什么功能，怎么使用和原理。
首先看一下插效果:
截图后直接粘贴上传。

拖拽上传

http网络

二.使用示例
直接调用：

xml/html code复制内容到剪贴板

1. <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>    
2. <script type="text/javascript" src="uploadimage.js"></script>    
3. new uploadimage("box", "uploadhandler.ashx").upload(function (xhr) {//上传完成后的回调    
4. var img = new image();    
5. img.src = xhr.responsetext;    
6. this.appendchild(img);    
7. }); 

amd/cmd

xml/html code复制内容到剪贴板

1. <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>    
2. <script type="text/javascript" src="require.js"></script>    
3. <script>    
4. require(['uploadimage'], function (uploadimage) {    
5. new uploadimage("box", "uploadhandler.ashx").upload(function (xhr) {//上传完成后的回调    
6. var img = new image();    
7. img.src = xhr.responsetext;    
8. this.appendchild(img);    
9. });    
10. })    
11. </script>   

三.浏览器支持
当前版本只支持以下，浏览器，后期可能会支持更多浏览器。
•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复制内容到剪贴板

1. function uploadimage(id, url, key)    
2. {    
3. this.element = document.getelementbyid(id);    
4. this.url = url; //后端处理图片的路径    
5. this.imgkey = key || "pasteareaimgkey"; //提到到后端的name    
6. }    
7. uploadimage.prototype.paste = function (callback, formdata)    
8. {    
9. var thatthat = this;    
10. this.element.addeventlistener('paste', function (e) {//处理目标容器（id）的paste事件    
11. if (e.clipboarddata && e.clipboarddata.items[0].type.indexof('image') > -1) {    
12. var that = this,    
13. reader = new filereader();    
14. file = e.clipboarddata.items[0].getasfile();//读取e.clipboarddata中的数据：blob对象    
15. reader.onload = function (e) { //reader读取完成后，xhr上传    
16. var xhr = new xmlhttprequest(),    
17. fd = formdata || (new formdata());;    
18. xhr.open('post', thatthat.url, true);    
19. xhr.onload = function () {    
20. callback.call(that, xhr);    
21. }    
22. fd.append(thatthat.imgkey, this.result); // this.result得到图片的base64    
23. xhr.send(fd);    
24. }    
25. reader.readasdataurl(file);//获取base64编码    
26. }    
27. }, false);    
28. }