Enable Disable Dynamic FileUpload controls using CheckBox selection in JavaScript

Last Reply on Feb 17, 2015 04:40 AM By Azim

Posted on Feb 17, 2015 02:19 AM

im reply regarding this article 

 

http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx

 

as i have add function to add these to my database the thing i want to now is i want to add checkbox to make the file as unique file

 

how i can add that?

 

You are viewing reply posted by: Azim on Feb 17, 2015 04:40 AM.
Posted on Feb 17, 2015 04:40 AM

Ref:

Uploading Multiple Files using JavaScript Dynamic FileUpload Controls in ASP.Net

Here i am disabling the File Upload control when the CheckBox is getting checked within the same div tag.

C# code will remain same.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multiple FileUpload Example</title>
    <script type="text/javascript">
        var counter = 0;
        function AddFileUpload() {
            var div = document.createElement('DIV');
            div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '" type="file" /><input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" />' + '<input id="Checkbox' + counter + '" type="checkbox" name="Checkbox' + counter + '" value="" onchange = "DisableFileUploadControl(this)" />';
            document.getElementById("FileUploadContainer").appendChild(div);
            counter++;
        }
        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
        }

        function DisableFileUploadControl(checkbox) {
            if (checkbox.checked) {
                div = checkbox.parentNode;
                var input = div.getElementsByTagName("input")
                for (var i = 0; i < input.length; i++) {
                    if (input[i].type == "file") {
                        input[i].disabled = "disabled"
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data" method="post">
    <span style="font-family: Arial">Click to add files</span>&nbsp;&nbsp;
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
    <br />
    <br />
    <div id="FileUploadContainer">
        <!--FileUpload Controls will be added here -->
    </div>
    <br />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    </form>
</body>
</html>