CODEWITHSUNDEEP
javascripthtmlfile
user2097141
user2097141

Reputation: 317

Javascript: getting file details on upload from HTML form

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.

Upvotes: 0

Views: 62

Answers (1)

tklg
tklg

Reputation: 2642

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

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

Upvotes: 1

Related Questions