Image upload plug-in ImgUploadJS: Use HTML5 File API to implement screenshot paste upload and drag and drop upload _html5 tutorial skills

1. Background and effects

Currently, the most uploaded files on the Internet are image files, but uploading screenshots of traditional web images requires: Save the screenshot -> Select the path -> Save and then Click Upload->Select Path->Upload->Insert.
Uploading image files also requires: select the path and then ->Upload->Insert, the steps are complicated, and the Internet experience is king. If it supports screenshot pasting upload and drag and drop upload, the experience will be greatly improved.
Currently, both Zhihu and Github support these two features for modern browsers. I learned to implement them when I had nothing to do. Today I will talk about what functions this 1kb plug-in implements, how to use it and its principles.
First take a look at the insertion effect:
After taking a screenshot, paste it directly and upload it.

Drag and drop to upload

http network

2. Usage example
Direct call:

XML/HTML CodeCopy content to clipboard

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) {//Callback after upload is completed
4. var img = new Image();
5. img.src = xhr.responseText;
6. this.appendChild(img);
7. });

AMD/CMD

XML/HTML CodeCopy content to clipboard

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; //The path for back-end image processing
5. this.imgKey = key || "PasteAreaImgKey"; //Name mentioned to the backend
6. }
7. UploadImage.prototype.paste = function (callback, formData)
8. {
9. var thatthat = this;
10. this.element.addEventListener('paste', function (e) {//Handle the paste event of the target container (id)
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();//Read the data in e.clipboardData: Blob object
15. reader.onload = function (e) { //After reader reading is completed, xhr is uploaded
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 gets the base64 of the image
23. xhr.send(fd);
24. }
25. reader.readAsDataURL(file);//Get base64 encoding
26. }
27. }, false);
28. }