Load images and display without reloading the page?

Question

JavaScript

We all know that it is impossible to load images via AJAX, but we would like to at least emulate this situation.

Essence: There is a form where, in particular, uploading a photo to the server is provided. In design, it looks something like this - the form has a large button for uploading an image (there may be several of them, i.e., buttons are added dynamically), by clicking on which a file selection window opens. Further, when the user has selected a file, the button disappears and a freshly uploaded photo appears in its place. Next, the user performs the same operation with the rest of the buttons (adding new buttons if necessary) and presses the “send” button, after which all the information he entered is saved.

As far as I understand, such a feint can only be done using an iframe, I would like details, because I tried to use jQuery Right Uploader, but nothing came of this venture. Perhaps because I use another jQuery plugin (jInputFile for those who are interested) to style the file select form.

The stylized button is the same size as the future image, it can also come in handy.

I would appreciate any help, thanks in advance.

Answer 1

Standard solution:
- Create a submit form and a hidden iframe.
<form enctype=multipart/form-data action=index.php method=post name=loadavatar target=hiddenframe> <input type=hidden name=MAX_FILE_SIZE value=64000> <input id=avatarfile name=avatarfile type=file> </form> <iframe id=hiddenframe name=hiddenframe style="width:0px; height:0px; border:0px"></iframe>
The submit form can be styled however you like (your own submit or file select button). On the form, it is necessary to place input [type=file] (picture selection) and input [name=MAX_FILE_SIZE] (file size limiter). The form's target must refer to a hidden iframe (hiddenframe in the example). When the file is sent, the target will reload (so if we don't use a hidden iframe, then we will reload the parent page).
Further, everything is extremely simple - either by pressing the submit button, or by calling , we document.forms["loadavatar"].submit()send the form; the hidden iframe is reloaded and the file is on the server. After that, it can be received from the server by request (or immediately returned to a hidden iframe) and displayed.

Answer 2

To make it only on the client it is not possible.
You must first send it to the server, then send the preview to the client, and then, at the request of the client, save / delete the file on the server.

This is possible in pure JS (thanks, HTML5) but needs a fallback for older browsers.
There is an example of an image preview without uploading to the server www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files .

Answer 3

Fine uploader - JS + server-side. We save the image on the server, the callback displays it to the user. After the submission, we add the status of confirmed to the images. We periodically run the garbage collector, which removes uploaded, but not confirmed images.

Answer 4

Did n't you watch this piece? ( discussion ).

Answer 5

www.slideshare.net/kuchinskaya/ss-14802024/1
github.com/mailru/FileAPI
implemented preview before loading and resizing on the client. in new browsers via html5 and canvas, in older flash and iframe.