KyLim
KyLim

Reputation: 476

asp.net dynamic multiple file upload

 protected void btnUpload_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFile PostedFile = Request.Files[i];
            if (PostedFile.ContentLength > 0)
            {
                string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
                PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
            }
        }
    }

<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)" />';
            document.getElementById("FileUploadContainer").appendChild(div);
            counter++;
        }
        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
        }
    </script>

The upload function can dynamic add as much as user want.

 <div>
            <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
            <div id="FileUploadContainer">
            </div>
            <asp:Button ID="btnUpload" runat="server"
                Text="Upload" OnClick="btnUpload_Click" />

        </div>

The problem I'm facing now is when I click upload for (int i = 0; i < Request.Files.Count; i++) this line , Request.Files.Count always = 0,even when I have 1 or more file to upload.I tried to debug this Request.Files.Count 0 always..

Upvotes: 2

Views: 1405

Answers (2)

Haitham Shaddad
Haitham Shaddad

Reputation: 4456

Run your page, view source and make sure the file upload button and the container div are contained within a form element, if not, then surround them with the following form element declaration

<form method='POST' enctype='multipart/form-data'>

<div>
<!-- REST of your HTML --!>

            <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
            <div id="FileUploadContainer">
            </div>
            <asp:Button ID="btnUpload" runat="server"
                Text="Upload" OnClick="btnUpload_Click" />

        </div>

</form>

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just wrap your FileUploadContainer div and Upload Button within a form and set its method to POST. Now you should get the files under Request.Files.Count. Just a sample below

<div>
    <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
    <form id="frmUploads" runat="server" method="POST">
        <div id="FileUploadContainer">
        </div>
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    </form>
</div>

Upvotes: 1

Related Questions