Preview an image before it is uploaded, hide broken img

Question

The basic code is in Preview an image before it is uploaded codes also are shown in below:

    <script type="text/javascript">
    function readURL(input) {
        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]);
        }
    }
</script>

    <body>
<form id="form1" runat="server">
    <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</form>

Codes work fine, but it shows broken image icon when there is no img is selected. I tried to use

    if($('#img_prev').attr('src',"#"){
       $('#img_prev').hide();
        }

But it hides all images. Any help is welcome! Thank you for your time.

by the way as a side note, your 'testing' logic would actually assign the source to be `#`. what u wanted was $('#img_prev').attr('src')=='#' ... it doesnt help your answer, but helps with future coding ventures — PlantTheIdea, May 31 '13 at 16:45

PlantTheIdea · Accepted Answer · 2013-05-31T16:37:09.193

1

Just make the CSS display:none on #blah and then modify your JS to have this function:

function readURL(input) {
    var $prev = $('#blah'); // cached for efficiency

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

        reader.onload = function (e) {
            $prev.attr('src', e.target.result);
        }

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

        $prev.show(); // this will show only when the input has a file
    } else {
        $prev.hide(); // this hides it when the input is cleared
    }
}

This should appropriately show/hide the img when the input changes.

By the way, you should really not use inline calls like onchange= if you are using jQuery. Something like this is much better:

<script type="text/javascript">
    ;(function($){
        function readURL(input) {
            var $prev = $('#blah');

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

                    reader.onload = function (e) {
                        $prev.attr('src', e.target.result);
                    }

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

                $prev.show();
            } else {
                $prev.hide();
            }
        }

        $('#imgInput').on('change',function(){
            readURL(this);
        });
    })(jQuery);
</script>

<body>
    <form id="form1" runat="server">
        <input id="imgInput" type='file' />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

This encapsulates all logic in one place, much easier to maintain. The next step, of course, is to have this in an external file rather than on the page, but that is beyond the scope of this.

edited May 31 '13 at 16:37

answered May 31 '13 at 16:24

PlantTheIdea

15,347
4
31
40

Thank you Plant,I will avoid inline calls in the future. But the broken image is still shown on the page if there is no image is selected. – Pluto May 31 '13 at 16:38
It seems like it doesn't pass else statement. – Pluto May 31 '13 at 16:39
ack sorry, i didnt have the right id for the img, edited my answer to set the CSS of `#blah` to `display:none` first. – PlantTheIdea May 31 '13 at 16:40
oh i know why ... you use `#blah` in your html but `#img_prev` in your attempted jQuery? must have crossed those wires myself when writing the answer – PlantTheIdea May 31 '13 at 16:42
haha, it works! Thank you so much. Yes, I missed display:none. – Pluto May 31 '13 at 16:48
This code does not work in xhtml 4.01 transitional.....does this code only compitable with html 5 – Abdul Basit Nov 11 '13 at 10:10
@AbdulBasit - "this code" in reference to the File Reader? No, both the code in the question and the code in the answer are based on HTML5. You would need to use a fallback if you are forced to code for IE9 or below => http://caniuse.com/filereader. But then, that is out of the scope of this question. – PlantTheIdea Nov 11 '13 at 17:25

Preview an image before it is uploaded, hide broken img

1 Answers1