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

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

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异步上传。
以下是初版本代码，比较简单。不再赘述。
部份核心代码

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. }   

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！