show uploaded image before clicking on submit button

Question

I want to show an uploaded image before clicking on an upload button. I tried but its not working, please check my code below. when I select an image to load then no image will come and after with the help of firebug I found that my code is making weird url's. you can also check fiddle here: http://jsfiddle.net/XdXLJ/

Script

$(document).ready(function(e) {
    $('#upload').click(function(){
        $('input[type="file"]').show().focus().click().hide();
        $('input[type="file"]').change(function(){

            var val = $('this').val;
            $('.img').append('<img src="'+val+'" />')

            })
        })
})

HTML

<form id="form1" name="form1" method="post" action="">
<input name="" type="file" />
<div id="upload">Upload</div>
<div class="img"></div>
</form>

Style

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;}
input[type="file"]{display:none;}

This will not work as you expect, because typically the browser fakes the path to the image before uploading. In order to achieve this you will need to use HTML5, or some other method. — BenM, Sep 24 '13 at 10:09
possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Dimitar Dimitrov, Sep 24 '13 at 10:13
does your requirement needs it to work in IE as well ?? if yes then you will have to save the image somewhere on your server before actual form submission with help of some other form — Hussain Akhtar Wahid 'Ghouri', Sep 24 '13 at 10:14

score 2 · Answer 1 · edited May 23 '17 at 11:59

in HTML:

<input type='file' onchange="readURL(this);" />

Javascript/JQuery through the Type FileReader

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

where input is the <input type="file"> element if you use AjaxToolKit AsyncFileUpload, you can get the input using: fileUploadElement.get_inputFile()

Please refere to: how to preview a image before and after upload?

score 1 · Answer 2 · edited May 23 '17 at 11:59

if your requirement is to work in browsers other than IE then you can follow this link and it has the perfect answer for you

but if your requirement also includes IE then you do a few steps Step 1 : create a different form , other than your main form , this different form cant be inside the main form as form inside a form cant be submitted .

Step 2 : inside your new form keep

<input type="file" name="imageFileChooser"/>

Step 3 : on change event of the file field call an ajax function

Step 4 : this ajax function submits your new form with only image field , and stores the image on server side

Step 5 : when you want to give the preview of the form you need to call the temporarily saved image from your server .

Step 6 : after preview and submission submit the main form and take image from the temporary location of the server or you can also keep a hidden file iput tag carrying the same file .

score 0 · Answer 3 · answered Jun 08 '20 at 04:49

There is an onchange event that triggers when an image is chosen, which can be directed to a function to load the image.

it loads the image immediately after the image is clicked.

<form>
    <input type="file" onchange="preview()">
    <img src="" width="100px" height="150px" id="frame">
</form>

<script type="text/javascript">
    function preview(){
        frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

show uploaded image before clicking on submit button

3 Answers3