Results view:

Steps:
1. To create an img tag, it is set high and wide border style



2. When a user double-click the img tags, pop-up file selection box
(1) to img tags set a double-click events:

(2) create a file selection control (input), set up the file input box change events, hide it:

Note: the accept: the server receives the file type, (the file is submitted through the file upload)

(3) when double-click the img tag triggers the click event of file input box:


3. The file input box change events, change when read picture
(1) access to the inside of the box file
Create a file variable are acquired by using ID value of input tag: var file=$(" # userPictureFile "). The get (0) files [0].
(2) to determine whether read the file file types need
Image files regular expression filtering:
RegexImageFilter=/^ (? : image \/BMP | image \/| GIF image \/JPG | image \/jpeg | image \/PNG) $/I;
(3) to determine whether the file is the picture file:

} else {alert (" choice is not a valid image file "); }
(4) using the file reader read the file
File reader: var imageReader=new FileReader ();
(5) the file into the URL (Base64 encoding)
ImageReader. ReadAsDataURL (file);

4. Put the pictures of the user's choice of documents on the img tag
(1) using the file read the onl oad event, after the completion of the trigger in the read file
ImageReader. onl oad=function (evt) {
}
(2) through the img tag set the ID selector to find the corresponding img tags, the pictures showed on the img tag
$(" # userPicture "). Attr (" SRC ", evt. Target. The result);


Conclusion: you can show your picture file to the img tags, but it is just a simple display on the page, and there is no substantial saving, exit pages, data will be cleared,