Javascript: getting file details on upload from HTML form

Question

Hope someone will be able to tell what I am doing wrong. I've searched all relevant articles, tried to copy the code as is but no luck. I am trying to get the file size after it is selected for upload in the HTML form.

Here is the relevant part of the code:

<script>
function handleFiles()
{

    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
        //alert("called");
        var inpFiles = document.getElementById('#i_file');
        //get the file size and file type from file input field
        //var fsize = $('#i_file')[0].files[0].size;
       alert(inpFiles );
        if(fsize>1048576) //resize if file size more than 1 mb (1048576)
        {
            alert(fsize +" bites\nToo big!");
        }else{
            alert(fsize +" bites\nYou are good to go!");
        }
    }else{
        alert("Not supported");
    }
};
</script>

<input name="uploadfile" type="file" id="i_file"  />
        <input type="button" value="Try" id="i_submit" onclick="handleFiles()" />

So, I'm getting a button to browse for files ,click, select - file name appears. I click the second button "Try" (as I don't wish to wait for the whole form submitted) and the alert(inpFiles) says "null". The line with fsize is commented as there is no valid pointer. Appreciate your comments.

1) document.getElementById() takes an id with no hashtag. 2) you are "alerting" (using alter function) with a variable that is not defined, it is commented out. 3) Read the basics of programming — Gacci
– Gacci, Commented Jan 21, 2017 at 19:06

tklg · Accepted Answer · 2017-01-21 19:06:47Z

1

getElementById('#i_file') should be getElementById('i_file'):

var inpFiles = document.getElementById('i_file');
var fsize = inpFiles.files[0].size;

answered Jan 21, 2017 at 19:06

tklg

2,6532 gold badges21 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Javascript: getting file details on upload from HTML form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related