Getting image size by javascript

Question

Why did you select an image twice the size of the second order image is not showing?

My full code: http://jsfiddle.net/ayxZM/

<script type="text/javascript">
    function handleFiles(files) {
        for (var i = 0; i < files.length; i++)
        {
            alert(files[i].size + " Bytes");
        }
    }
</script>
<input type="file" onchange="handleFiles(this.files)">

nnnnnn · Accepted Answer · 2012-11-18 20:50:39Z

1

If you select the same image twice then the image selection hasn't really changed, so the onchange handler isn't fired. If you select a different image its size is displayed.

answered Nov 18, 2012 at 20:50

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jennifer Jolie Over a year ago

I select the same image twice, What do i do?

nnnnnn Over a year ago

Why do you need to do anything? You've already done something with that image's details the first time...

barakadam · Accepted Answer · 2012-11-18 22:16:50Z

0

Reset your field like this. I tested it. It works perfectly.

            <script type="text/javascript">

                function handleFiles(files) {
                    for (var i = 0; i < files.length; i++)
                    {
                       alert(files[i].size + ' Bytes' );
                       reset_field('handleFilesfield');
                }
                }

                function reset_field(id) {
                $('#'+id).html($('#'+id).html());
                }

            </script>
            <form>
                <span id="handleFilesfield"><input type="file" onchange="handleFiles(this.files)"/></span>
            </form>

answered Nov 18, 2012 at 22:16

barakadam

2,2871 gold badge17 silver badges15 bronze badges

2 Comments

nnnnnn Over a year ago

What if the value needs to be retained so that it can be submitted?

barakadam Over a year ago

Well then just save it somewhere while inside handleFiles. You can even assign it to another form field in your page, so you can retain it. At least, your value will not be associated with your file input.

barakadam · Accepted Answer · 2012-11-18 20:55:52Z

0

Because when you click on the same image, the second time, there is no change of file, so the onchange event does not get triggered, so the function handleFiles does not get called, so the size does not get displayed. Use another event for this case. Maybe you could reset the input file inside the handleFiles function. That way, even if the user selects the same image again, it will be considered as a new image, and therefore the onchange event will get triggered.

answered Nov 18, 2012 at 20:55

barakadam

2,2871 gold badge17 silver badges15 bronze badges

Comments

LeZuse · Accepted Answer · 2012-11-19 00:09:10Z

0

As mentioned here already: onchange does not fire when you select the same image (= don't change the value – see? that makes sense). But if you want to fire onchange everytime you can try reseting the value in onmousedown event. That way the value stays for submission and also forces onchange to fire. Demo: http://jsfiddle.net/LeZuse/ayxZM/27/
NOTE: If you need it to be touch compatible, you may wanna use ontouchstart also.

answered Nov 19, 2012 at 0:09

LeZuse

1,10710 silver badges17 bronze badges

Collectives™ on Stack Overflow

Getting image size by javascript

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related