How to upload an image with jQuery client side and

Question

So basically, as the title says, I want to have an upload button that allows a client to upload an image and it will then be displayed in a div.

Of course, this would just be client side, so if the page was ever refreshed then the image would disappear.

The image would then be styled accordingly and given fixed widths and heights.

I searched online and couldn't find anything at all.

Very new to jQuery, although I can code fluently in Javascript.

Also not to sure if this is possible or not without the help of AJAX and/or PHP. Would like to avoid these if possible.

All help is greatly appreciated.

Answer 1

Refer this http://www.codeforest.net/html5-image-upload-resize-and-crop

you can use HTML5 tags like canvas for the same...and you can also use some Jquery plugins like jCrop for the same..

Answer 2

Here is a working JSFiddle for what you are looking for

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);
    }
}

$("#imgInp").change(readURL);

As a side note, the above solution uses jQuery although it is not required for a working solution, Javascript only :

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

---

See the jsFiddle Fork made here to help explain how to make more use of jQuery to answer some of your comment questions.