Image Upload plug-in ImgUploadJS: uses the HTML5 File API to implement screenshot pasting, upload, and drag/drop upload,

Image Upload plug-in ImgUploadJS: uses the HTML5 File API to achieve pasting, uploading, and dragging,
I. background and Effects

Currently, the most uploaded files on the Internet are image files, but traditional web images need to be uploaded: save> select path> Save and then click upload> select path> upload> insert.
For Image File Upload, you also need to select a path and then choose upload> insert. The steps are complex and the Internet experience is king. If you support pasting, dragging, and uploading, the experience will be greatly improved.
Currently, zhihu and github both support these two features for modern browsers and learn how to implement the plug-in with nothing to worry about. Today we will talk about the functions, how to use and principles of this 1 kb plug-in.
First, let's take a look at the insert effect:
And then directly paste and upload.

Drag/drop upload

Http Network

Ii. Example
Direct call:
Copy XML/HTML Code 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 the upload is complete
4. Var img = new Image ();
5. Img. src = xhr. responseText;
6. This. appendChild (img );
7. });

AMD/CMD

Copy XML/HTML Code 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) {// callback after the upload is complete
6. Var img = new Image ();
7. Img. src = xhr. responseText;
8. This. appendChild (img );
9. });
10. })
11. </Script>

3. browser support
The current version only supports the following browsers. More browsers may be supported later.
• IE11
• Chrome
• FireFox
• Safari (untested, theory should be supported)
Iv. Principles and source code
1. paste and upload
Process the paste event of the target container (id) and read the data in e. clipboardData. If it is an image, perform the following processing:
Use the H5 File API (FileReader) to obtain the base64 code of the File and construct an asynchronous FormData upload.
2. Drag and Drop upload
Process the drop event of the target container (id), read the data in e. dataTransfer. files (H5 File API: FileList), and construct an asynchronous FormData upload for images.
The following is the first version of the code, which is relatively simple. I will not go into details.
Some core code

Copy XML/HTML Code to clipboard

1. Function UploadImage (id, url, key)
2. {
3. This. element = document. getElementById (id );
4. This. url = url; // the path of the backend image.
5. This. imgKey = key | "PasteAreaImgKey"; // refer to the backend name.
6. }
7. UploadImage. prototype. paste = function (callback, formData)
8. {
9. Var thatthat = this;
10. This. element. addEventListener ('paste ', function (e) {// process 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 data in e. clipboardData: Blob Object
15. Reader. onload = function (e) {// After reader completes reading, xhr uploads
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 obtains the base64 of the image.
23. Xhr. send (fd );
24. }
25. Reader. readAsDataURL (file); // get base64 encoding
26. }
27. }, False );
28. }