JS use uploaded image before upload
<p>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.</p>

<p>I'm don't have so much experience with JS, so so far I ended up with this code:</p>

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

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