want to show file upload size in input tag using javascript/jquery

Question

In the code below, I want to show the size of uploaded file in a div or label element. However, it doesn't work when I want to show it in an input element.

 <script>
    var maxfilesize = 2097152;//2MB;
    $('#fuAttachments').live("change", function () {
        $("#msg").text("");

        var tt = $(this).val();

        var size = this.files[0].size;
        $("#msg").append(Math.ceil(size / 1024));

    });
</script>
<input id="fuAttachments" type="file" />

I want to display the size of uploaded file in #msg

<input id="msg" type="text" />

Side note: Try and use .on(). As of jQuery 1.7, the .live() method is deprecated. — Matt Harrison
– Matt Harrison, Commented Jun 2, 2013 at 14:03

Patrick Kostjens · Accepted Answer · 2013-06-02 14:04:07Z

1

It should work when you replace this line:

$("#msg").append(Math.ceil(size / 1024));

With this:

$("#msg").val(Math.ceil(size / 1024));

The .val() function sets the value property of all matched tags, while the .append() function inserts content at the end of the element.

answered Jun 2, 2013 at 14:04

Patrick Kostjens

5,1006 gold badges31 silver badges46 bronze badges

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

2 Comments

Adeeb Keyaam Over a year ago

now i have another problem with this, if i use jquery.min.js then its working but if i use jquery.1.9.js then its not working, but i want to use jquery.1.9.js.

Patrick Kostjens Over a year ago

Why would you want to use jquery.1.9.js? The minified version saved bandwidth and reduces loading times. What is not working when you use the non minified version?

Dmitrii Tarasov · Accepted Answer · 2013-06-02 14:04:41Z

1

Use "val" instead of "append"

$('#msg').val(size);

answered Jun 2, 2013 at 14:04

Dmitrii Tarasov

4142 silver badges13 bronze badges

Comments

PSR · Accepted Answer · 2013-06-02 14:03:27Z

0

when i want to show it as input value. use .val() ..append() will not work for input .

answered Jun 2, 2013 at 14:03

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

F__M · Accepted Answer · 2013-06-02 14:04:55Z

0

Try:

$("#msg").val(Math.ceil(size / 1024));

or

$("#msg").val(size);

Why .val?

Form jQuery Doc:
Get the current value of the first element in the set of matched elements or set the value of every matched element. The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

answered Jun 2, 2013 at 14:04

F__M

1,5883 gold badges21 silver badges34 bronze badges

Comments

itz2k13 · Accepted Answer · 2013-06-02 14:08:08Z

0

Please use the following script:

<script>
 var maxfilesize = 2097152;//2MB;
 $('#fuAttachments').live("change", function () {
    var size = $(this).files[0].size;
    $("#msg").val(Math.ceil(size / 1024));

 });
</script>

answered Jun 2, 2013 at 14:08

itz2k13

1592 bronze badges

Collectives™ on Stack Overflow

want to show file upload size in input tag using javascript/jquery

5 Answers 5

2 Comments

Comments

Comments

Why .val?

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Why .val?

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related