Chinese front-end UI framework kit (8) No plug-in asynchronous File Upload Component source code parsing

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

The previous article introduced the usage of the Upload Component and the API.CodeThe analysis will explain the principles

Demo address: http://xueduany.github.com/KitJs/KitJs/index.html#upload

(1) Dom Structure

First, let's take a look at the DOM structure of the upload button.

We can clearly see that in a layer-by-layer Div, a form element input file is nested, and the area of this input file is large enough to cover the external Div through the CSS rendering button. In this way, click the button made by the external Div, which is equivalent to clicking the input file, so that you can open the file through the input file and select. Likewise, the preview of image uploads is also the same.

* Maybe some children's shoes will ask, isn't the input file colored? OK, we set it to transparent and it won't be displayed, and his dom position is still there.

(2) Select File Upload

Bind the change event of the input file. After the file is selected, the upload event is triggered.

Get input. files to start uploading

Create an Ajax link, upload the file content in post mode, and set filename in the Request Header

Content-Type is set to Content-Type "," application/octet-stream"

The onprogress method is called during the upload process to display the progress bar.

 

This upload method is not supported for IE.

Create an IFRAME, create a form in IFRAME, and upload it using form submission.

 

(3) drag and drop upload

Drag/drop upload: only supports advanced browsers,

 

The key point is that the browser puts the file into the datatransfer attribute of the event object in the drag and drop events.