Jump to content

Applying javascript to check file size and extension


nanie
Go to solution Solved by Psycho,

Recommended Posts

HI. Can anyone help me. I've change the code here and there to make it works but failed. :( The problem is there is 2 files to be uploaded, but only the second one will display alert message, while the first one will just receive any file. EG: I try select the same file for both. But the first one does not respond while the second part respond that it is not the acceptable file extension.

 

Here is the code.

<script>
    function checkFile()
    {   
    var node_list = document.getElementsByTagName('input');
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'file') 
        {
            var sFileName = node.value;
            var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1];
            var iFileSize = node.files[0].size;
            var iConvert=(node.files[0].size/10485760).toFixed(2);
        }


        if (sFileExtension != "pdf" && sFileExtension != "doc" && sFileExtension != "docx" && iFileSize>10485760)
        {   
            txt="File type : "+ sFileExtension+"\n\n";
            txt+="Size: " + iConvert + " MB \n\n";
            txt+="Please make sure your file is in pdf or doc format and less than 10 MB.\n\n";
            alert(txt);
        }
    }
}
    </script>

my form,

<input type="file" name="file" id="confirm" onchange="checkFile()">
<input type="file" name="file" id="approveletter" onchange="checkFile()">

Please help me...

Link to comment
Share on other sites

Well, both fields have the same name. that may not explain why the JavaScript isn't doing what you want, but you would only ever get one file in your uploads.

 

In your function the second if() condition belongs inside the first condition's code block. Why would you be checking the extension on the file if the first condition was false. A better alternative is to check if the type is NOT 'file' and use 'continue' to skip to the next item in the for() loop.

 

In any event, you should do this validation on the server-side. JavaScript can only check the extension, but you can check the real file type on the server using PHP.

Link to comment
Share on other sites

Well, both fields have the same name. that may not explain why the JavaScript isn't doing what you want, but you would only ever get one file in your uploads.

 

In your function the second if() condition belongs inside the first condition's code block. Why would you be checking the extension on the file if the first condition was false. A better alternative is to check if the type is NOT 'file' and use 'continue' to skip to the next item in the for() loop.

 

In any event, you should do this validation on the server-side. JavaScript can only check the extension, but you can check the real file type on the server using PHP.

> Before this I put different name for different file, but when I faced problem on how to handle multiple uploads, some people in a forum suggest to use array to grab the files. So I have to use the same name for each files (file[ ]) . Now I get confused.

 

> I'll try what you have suggested.

 

> The file still will be checked later on server-side. This is just to alert user to insert the correct file so that it is easier to check later. Since I have a long form, handling it might takes time and imagine if user upload wrong file. :D

Link to comment
Share on other sites

> Before this I put different name for different file, but when I faced problem on how to handle multiple uploads, some people in a forum suggest to use array to grab the files. So I have to use the same name for each files (file[ ]) . Now I get confused.

 

You can name the upload fields for multiple files as an array - but you didn't do that. You named them "file", not "file[]". But there is no reason you need to do that. If one upload is for an approval letter, then give that fiel a representative name. The other people may have been confusing the fact the that uploads and the details will be in an array regardless - i.e. the $_FILES array. But, you can have multiple fields with different names and they will be handled within that global array.

Link to comment
Share on other sites

  • Solution

Also, I just noticed you are calling the function using an onchange event on the upload fields. So, there is no need to have the function iterate through all of the input fields. Just pass the field object to the function since you know which field was changed.

 

Also, the logic to check the file is off. If any ONE condition is false it triggers the error message. So, if the file has the right extension then one of the conditions will be false and the image passes - regardless of the size. It need to test the extension and the size separate as an OR condition. Lastly, the conversion to MB is wrong - there's an extra 0 at the end.

 

This seems to work.

 

    function checkFile(fieldObj)
    {
        var FileName  = fieldObj.value;
        var FileExt = FileName.substr(FileName.lastIndexOf('.')+1);
        var FileSize = fieldObj.files[0].size;
        var FileSizeMB = (FileSize/10485760).toFixed(2);

        if ( (FileExt != "pdf" && FileExt != "doc" && FileExt != "docx") || FileSize>10485760)
        {
            var error = "File type : "+ FileExt+"\n\n";
            error += "Size: " + FileSizeMB + " MB \n\n";
            error += "Please make sure your file is in pdf or doc format and less than 10 MB.\n\n";
            alert(error);
            return false;
        }
        return true;
    }

 

 

<input type="file" name="confirm" id="confirm" onchange="checkFile(this)">
<input type="file" name="approveletter" id="approveletter" onchange="checkFile(this)">
Link to comment
Share on other sites

Thanks Guru!

 

It works very well! :happy-04:  I appreciate your help. My problem with the script solved.

 

Now I'm trying to figure out on how to handle this multiple upload in the server-side. There are 6 files user have to upload. and will be store under one table named submission (field name: file1, file2 and so on)

 

If possible please guide me with this too..

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.