On file upload change event JavaScript function not firingltaspFileUpload ID34fudigitalfile34 accept34pdfPDF34 runat34server34 onchange34Filevalidation34 gtltscriptgt function Filevalidation lblErrorinnerHTML 3434 var allowedFiles 34doc34 34docx34 34pdf34 var fileUpload documentgetElementById34ltfudigitalfileClientID gt34 var lblError documentgetElementB

Hi naunaRefer below sample codeHTMLltdivgt ltaspFileUpload ID34FileUpload134 accept34pdfPDF34 runat34server34 onchange34Filevalidation34 gt ltaspLabel ID34lblError34 runat34server34 ForeColor34Red34 gt lthr gt ltaspLabel ID34lblSelected34 runat34server34 ForeColor34Green34 gt ltbr gt ltaspLabel ID34lblSize34 runat34server34 ForeColor34Green34 gtltdivgtltscript type34textjavascript34gt function Filevalidation var lblFile documentgetElementById34ltlblSelectedClientID gt34 lblFileinnerHTML 3434 var lblError documentgetElementById34ltlblErrorClientID gt34 lblErrorinnerHTML 3434 var fileUpload documentgetElementById34ltFileUpload1ClientID gt34 var allowedFiles 34doc34 34docx34

[Solved] FileUpload OnChange event not firing in JavaScript

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Jul 06, 2020 11:51 PM
Forum: JavaScript
Answer: 1
Views: 25384
Sample Code: Download

On file upload change event JavaScript function not firing

<asp:FileUpload ID="fudigitalfile" accept=".pdf,.PDF" runat="server" onchange="Filevalidation()" />
<script>
    function  Filevalidation() { 
        lblError.innerHTML = "";   
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = document.getElementById("<%=fudigitalfile.ClientID %>");
        var lblError = document.getElementById("lblError");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.value.toLowerCase())) {
            lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";

            return false;
        }

        else {

            alert("File selected");
        }

        //check size            
        const fi =  document.getElementById("<%=fudigitalfile.ClientID %>"); 
        // Check if any file is selected. 
        if (fi.files.length > 0) { 
            for (const i = 0; i <= fi.files.length - 1; i++) {   
                const fsize = fi.files.item(i).size; 
                const file = Math.round((fsize / 1024));
              
                // The size of the file. 
                if (file >= 4096) { 
                    alert( 
                        "File too Big, please select a file less than 4mb"); 
                }  else { 
                    document.getElementById('size').innerHTML = '<b>'
                    + file + '</b> KB Size File Selected '; 
                } 
            } 
        }
    } 
</script>

dharmend...

1 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 07, 2020 02:42 AM
Modified: on Jul 07, 2020 02:43 AM
Report

Hi nauna,

Refer below sample code.

HTML

<div>
    <asp:FileUpload ID="FileUpload1" accept=".pdf,.PDF" runat="server" onchange="Filevalidation()" />
    <asp:Label ID="lblError" runat="server" ForeColor="Red" />
    <hr />
    <asp:Label ID="lblSelected" runat="server" ForeColor="Green" />
    <br />
    <asp:Label ID="lblSize" runat="server" ForeColor="Green" />
</div>
<script type="text/javascript">
    function Filevalidation() {
        var lblFile = document.getElementById("<%=lblSelected.ClientID %>");
        lblFile.innerHTML = "";
        var lblError = document.getElementById("<%=lblError.ClientID %>");
        lblError.innerHTML = "";
        var fileUpload = document.getElementById("<%=FileUpload1.ClientID %>");
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.value.toLowerCase())) {
            lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
            return false;
        } else {
            if (fileUpload.files.length > 0) {
                for (var i = 0; i <= fileUpload.files.length - 1; i++) {
                    var fsize = fileUpload.files.item(i).size;
                    var file = Math.round((fsize / 1024));
                    // The size of the file.
                    if (file >= 4096) {
                        alert("File too Big, please select a file less than 4mb");
                    } else {
                        document.getElementById('<%=lblSize.ClientID %>').innerHTML = '<b>' + file + '</b> KB Size File Selected ';
                    }
                }
            }
            lblFile.innerHTML = fileUpload.files.item(0).name;
        }
    }
</script>

Screenshot

[Solved] FileUpload OnChange event not firing in JavaScript

Company

Explore

Follow us

Contact Us