how to pass multiple id of FileUpload to javascript function

Question

0.00/5 (No votes)

See more:

I am working on asp.net web application in which i have 6 FileUpload Controls. for one file upload i have created a javascript method to check file extension and file size. but how to pass id of FileUpload upload as a parameter so that only in only one method i can validate all FileUpload my code of javacript is

JavaScript

var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx",         "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
    function CheckExtension() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var path = file.value;
        var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
        var isValidFile = false;
        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }
        if (!isValidFile) {
            alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }
        return isValidFile;
    }

    function validateFileSize() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var fileSize = file.files[0].size;
        var isValidFile = false;
        if (fileSize !== 0 && fileSize <= 25214400) {
            isValidFile = true;
        }
        if (!isValidFile) {
            alert("File Size Should be Greater than 0 and less than 25 mb");
        }
        return isValidFile;
    }

and i have used this in aspx page

ASP.NET

<asp:FileUpload ID="txtTenderDoc" onchange="var result= CheckExtension();validateFileSize(); return result"
                        runat="server"></asp:FileUpload>

as you can see i have to create 6 method by this to check file size and file extension how to do that in only one method....

Updated
after seeing this

i have changed my javascript to

JavaScript

var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
        function CheckExtension(Id) 
        {
            /*global document: false */
            var file = document.getElementById(Id);
            debugger;
            var path = file.value;
            var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
            var isValidFile = false;
            for (var i = 0; i < validFilesTypes.length; i++) {
                if (ext == validFilesTypes[i]) {
                    isValidFile = true;
                    break;
                }
            }
            if (!isValidFile) {
                alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
            }
            return isValidFile;
        }


        function validateFileSize(Id) {
            /*global document: false */
            var file = document.getElementById(Id);
            var fileSize = file.files[0].size;
            var isValidFile = false;
            if (fileSize !== 0 && fileSize <= 25214400) {
                isValidFile = true;
            }
            if (!isValidFile) {
                alert("File Size Should be Greater than 0 and less than 25 mb");
            }
            return isValidFile;
        }

and calling it like this

ASP.NET

<asp:FileUpload ID="flTenderDoc" onchange="var result=CheckExtension('flTenderDoc');validateFileSize('flTenderDoc'); return result"
                            runat="server"></asp:FileUpload>

but it is not working ......
can anyone help this is my first javascript method :)

Posted 18-Dec-13 22:17pm

Vishal Pand3y

Updated 18-Dec-13 23:08pm

v3

Add a Solution

Comments

Kriti Jain 19-Dec-13 4:39am

you can pass "sender" and "args" as arguments to the javascript function CheckExtension(). From, args.Value you will get the filePath.

2 solutions

Solution 2

it is what i did for your solution rest of you can do by your self

JavaScript

<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {



            var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
            $('.s').change(function () {
                CheckExtension(this);

                validateFileSize(this);

            });
            function CheckExtension(e) {
                /*global document: false */


                var file = e;
                var path = file.value;

                var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
                var isValidFile = false;
                for (var i = 0; i < validFilesTypes.length; i++) {
                    if (ext == validFilesTypes[i]) {
                        isValidFile = true;
                        break;
                    }
                }
                if (!isValidFile) {
                    alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));

                }
                return isValidFile;
            }

            function validateFileSize(e) {
                /*global document: false */
                var file = e;
                var fileSize = file.files[0].size;
                var isValidFile = false;
                if (fileSize !== 0 && fileSize <= 25214400) {
                    isValidFile = true;
                }
                if (!isValidFile) {
                    alert("File Size Should be Greater than 0 and less than 25 mb");
                }
                return isValidFile;
            }
        });
    
    </script>
</head>

ASP.NET

<asp:fileupload id="txtTenderDoc" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
    <asp:fileupload id="FileUpload1" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
     <asp:fileupload id="FileUpload2" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
      <asp:fileupload id="FileUpload3" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
       <asp:fileupload id="FileUpload5" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
       <asp:fileupload id="FileUpload4" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>

Posted 18-Dec-13 23:19pm

cyber_addicted

Comments

Vishal Pand3y 19-Dec-13 5:54am

i have also tried this but it's not working and i am getting many compile time error....

[no name] 19-Dec-13 6:38am

<asp:FileUpload ID="txtTenderDoc" class="s" runat="server">
instead of
<asp:fileupload id="txtTenderDoc" class="s" runat="server" xmlns:asp="#unknown">

Vishal Pand3y 19-Dec-13 6:40am

ya i have but there is error near $('.s')

[no name] 20-Dec-13 4:28am

can you please explain what u getting issue in my code in my side its working well enough.

Vishal Pand3y 20-Dec-13 4:39am

i think problem is because of line <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
i don't have any j query so may be i am getting error

[no name] 20-Dec-13 4:45am

yes defiantly you can not use this code without js file just download it from http://code.jquery.com/jquery-1.9.1.js or you can use directly by this tag..if you working in internet connected mode.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Vishal Pand3y 20-Dec-13 4:49am

thnks very much i will try this :)

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-12-18T23:13:00

Solution 1

Solution

Always follow the second method. You have missed something. let me correct.

JavaScript

var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
function CheckExtension(file) {
    /*global document: false */
    //var file = document.getElementById(this.ClientID);

    var path = file.value;
    var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
    var isValidFile = false;
    for (var i = 0; i < validFilesTypes.length; i++) {
        if (ext == validFilesTypes[i]) {
            isValidFile = true;
            break;
        }
    }
    if (!isValidFile) {
        alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
    }
    return isValidFile;
}

function validateFileSize(file) {
    /*global document: false */
    //var file = document.getElementById(this.ClientID);

    var fileSize = file.files[0].size;
    var isValidFile = false;
    if (fileSize !== 0 && fileSize <= 25214400) {
        isValidFile = true;
    }
    if (!isValidFile) {
        alert("File Size Should be Greater than 0 and less than 25 mb");
    }
    return isValidFile;
}

Mark that I have provided the arguments inside functions and commented out the line...

JavaScript

//var file = document.getElementById(this.ClientID);

Because you will now do everything on file which you received as argument.

Note

I have tested at my end, it is working fine.

Posted 18-Dec-13 23:13pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Vishal Pand3y 19-Dec-13 5:34am

i have tried this and on var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase(); line i am getting error Uncaught TypeError:can not call method 'lastIndexOf' of undefined

Vishal Pand3y 19-Dec-13 5:41am

in file upload control do i have to change something

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-13 5:44am

I encountered one error in IE and it is corrected by changing the below code...

var fileSize = file.files[0].size;

to

var fileSize = file.size;

So, change this and try again. Also tell me which browser you are using for testing and what type of file you are selecting?

Vishal Pand3y 19-Dec-13 5:52am

by Changing this and using onchange="var result=CheckExtension(this);validateFileSize('this'); return result" it's working
but i can't understand why it wasn't working before that when i am selecting a file with extension .exe i haven't change anything in that method
and i am using chrome browser

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-13 5:59am

No in chrome when I select the .exe file, it shows alerts me that "Invalid File. Unknown Extension Of Tender.....". So, it is working fine.

Vishal Pand3y 19-Dec-13 6:15am

now var fileSize = file.size; is not returning size of the file because
if (fileSize !== 0 && fileSize<= 25214400) returns always false;
ie when i select a file of size 1mb it shows alert

Vishal Pand3y 19-Dec-13 6:19am

var fileSize = file.size; returns number of characters in the name of file :(

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-13 6:36am

Yes, this gives wrong result. You can't check the size in client side.
I would suggest you to check the size in server side and alert accordingly.

Vishal Pand3y 19-Dec-13 6:41am

var fileSize = file.files[0].size; works fine in firefox and chrome but its not working in ie i don't know why

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-13 6:45am

IE gives extra security to File Upload control. You can find a code for IE using ActiveXObject, but that works only when it is enabled in Browser settings.

So, I would agin suggest you to go for Serer side code.

Vishal Pand3y 19-Dec-13 6:57am

ya that is the last option bt am still looking for any alternative :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-13 6:59am

Okay. Carry on. :)

Taha Akhtar 19-Dec-13 5:39am

Use jquery it will ease your workings e.g
$('input[id*='flTenderDoc']).foreach(function(){......});
this will get all file upload elements having id file upload then iterate each element to get file value.

Vishal Pand3y 19-Dec-13 5:42am

@Taha Akhtar- i haven't much knowledge of java script so can you please Explain your answer

Taha Akhtar 19-Dec-13 5:48am

I am suggesting you to get help from jquery it's a wonderfull library built on top of javascript
http://api.jquery.com/

http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors

http://api.jquery.com/attribute-contains-selector/

how to pass multiple id of FileUpload to javascript function

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

how to pass multiple id of FileUpload to javascript function

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us