Question

I’m trying to use image that the user select in an upload field before it’s really uploaded server side. Specifically I want to let the user manipulate the image (crop, lightning etc) with some jquery plugin before he actually upload it.

I’m don’t have so much experience with JS, so so far I ended up with this code:

$(".image_upload_form").submit(function (e) {
    "use strict";
    e.preventDefault();
    var input, files, reader;
    input = $("#id_image");
    files = input[0].files;
    if (files && files[0]) {
        reader = new FileReader();
        reader.onload = function (e) {
            $('#img_view').attr('src', e.target.result);
        };
        reader.readAsDataURL(files[0]);
    }
});

which works fine, the image is shown on the "#img_view" after the form is submitted. But I need to get the "e.target.result" in the reader.onload function into a variable, so I can use it in later code. how can I do that?

Answer 1

well if you are considering IE , the this will work on all browsers , almost on every main browser

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

        reader.onload = function (e) {
            $('#imagePreview')
                        .attr('src', e.target.result)
                        .width(240)
                        .height(149);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
        $('#imagePreview').attr('src', "../../Images/blqblq.jpg");
    }
}

<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>