HTML5 images asynchronous upload/form submission related

1 Form form Get/post submission time. The action address (or whatever Ajax URL address) involves cross-domain issues

Common cross-domain issues http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

Example:

The first method of writing relative paths

$. Get ('localhost:8080/test_upload/aservlet', {                        }, function (data) {                           });

Test_upload for Project name

It's written here as a relative path, and there's no problem.

　　

$. Get (' HTTP://localhost:0880/test_upload/aservlet', {                        }, function (data) {                           });

localhost: is the domain name

127.0.0.1 what corresponds to the IP

This can be problematic:

1 Note the protocol must be written (HTTP//)

2 when HTML or JSP files and projects are in Eclipise (running under the same server) http://localhost or HTTP://127.0.0.1/or http://192.168.100.xx can

But when not under a server, Aservlet in eclipise Tomcat run, HTML in Webstorm Server run, the address is tested only written HTTP://127.0.0.1/can, the rest will cross the domain

2 Common two ways to upload images asynchronously　　

1 HTML5 before using IFRAME (

There are two key areas to this technology:

1.form Specifies the target, and the submitted results are directed back to the hidden Ifram. (that is, the target of the form is consistent with the Name property of the IFRAME).

2. After the submission is complete, the page in the IFRAME communicates with the main page to notify the upload result and the server file information.

）

2 HTML5 New method with Ajax (using XMLHttpRequest2 for a true asynchronous upload.)

People who have used Ajax know that the XHR object provides a onreadystatechange callback method to listen to the entire request/response process. There are several more progress events in the XMLHTTPREQUEST2 level specification. The following 6 events are available:

1.loadstart: Triggered when the first byte of a response data is received.

2.progress: Continues to trigger during receive response.

3.error: triggered when a request error occurs.

4.abort: Triggered when a connection is terminated because the abort () method is called.

5.load: Triggered when full response data is received.

6.loadend: Triggered after communication is complete or triggered Error,abort,load event

）

Reference http://www.jb51.net/article/80512.htm

3 HTML5 two common ways to upload images asynchronously and upload points　

Mode 1) is still input of type equals file mode

Mode 2) Drag

Points

1 drag and drop you can use DataTransfer to pass data, which is very useful because when you drag a target element, it may pass through other elements that we can use to pass information;

Api:

DragStart when drag and drop elements start dragging and dropping

Drag drag and drop elements during drag and drop

DragEnter drag-and-drop elements are dragged and dropped as elements begin to enter this element

DragOver the elements of the mouse passing through this element during drag and drop

Drageleave the element that the mouse passes through during drag and drop

Drop drag and drop the element dragged by the target element into this element

Dragend drag and drop end of dragged object

Upload points:

FileReader Interface

FileReader interface, can read the file into memory, with this thing we can very comfortable to do picture preview, but his public more than that.

Four Ways to FileReader:

Readasbinarystring reads the file as a binary code--usually we pass the data to the backend;

Readastext the file as text-reads the text content;

Readasurl file read as dataurl--is generally small files, pictures or HTML;

Abort interrupts the read because the file is too large to wait for a long time

FileReader Interface Events:

Onabort read interrupt trigger;

OnError read failure trigger;

Onloadstart start reading trigger;

OnProgress Read in

Triggered when the onload read succeeds;

Onloadend after the completion of the read, regardless of success failure;

Reference

Http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3025240.html

HTML5 images asynchronous upload/form submission related