How can I show preview image without upload?

Question

I would like to show preview image without the image is being uploaded. Preferably if I can crop the image first, then show preview. What is the best way to do this? I heard this can be done with jquery and ajax. My website is using cakePHP.

Google has tons of example for this. Google: "image preview filereader". — dfsq, May 28 '17 at 11:50
Here is your answer. https://stackoverflow.com/a/10820214/5292650 I hope it helps — M.Nabeel, May 28 '17 at 11:58

score 0 · Answer 1 · answered May 28 '17 at 11:52

The html code:

<input type="file" id="files" />
<img id="image" />

The JavaScript code:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

You may refer More Here

How can I show preview image without upload?

1 Answers1