Use html5 FileReader to retrieve images and upload them to the server asynchronously (without iframe ),

Use html5 FileReader to retrieve images and upload them to the server asynchronously (without iframe ),

Use html5 FileReader to retrieve images and upload them to the server asynchronously (without iframe)

Principle:

1. Use FileReader to read the base64 encoding of the image

2. Use ajax to post the base64 encoded image to the server.

3. analyze the image type (jpg, gif, and png) based on the received post data, and generate the corresponding type of image file based on base64_decode.

Html:

<! Doctype html public> 
Server. php

<? Php $ img = isset ($ _ POST ['img '])? $ _ POST ['img ']: ''; // obtain the image list ($ type, $ data) = explode (', ', $ img ); // determine the type if (strstr ($ type, 'image/jpeg ')! = '') {$ Ext = '.jpg ';} elseif (strstr ($ type, 'image/gif ')! = '') {$ Ext = '.gif ';} elseif (strstr ($ type, 'image/png ')! = '') {$ Ext = '.png ';} // generated file name $ photo = time (). $ ext; // generate the file file_put_contents ($ photo, base64_decode ($ data), true); // return header ('content-type: application/json; charset = UTF-8 '); $ ret = array ('img' => $ photo); echo json_encode ($ ret);?>