Upload Files

Question

User-1499457942 posted

Hi

  I have below code . When I select multiple files together then it works o.k . When i select 1 by 1 then it uploads only last.

<asp:FileUpload runat="server" ID="FileUpload1" AllowMultiple="true" />  
                                                    <ul id="ulList"></ul>

protected void btnupload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFiles)
        {
            int i = 0;
            string[] arr = new string[5];
            foreach (HttpPostedFile uploadedFile in FileUpload1.PostedFiles)
            {
                if (uploadedFile.ContentLength > 0)
                {
                    arr[i] = uploadedFile.FileName;
                    uploadedFile.SaveAs(Server.MapPath("~") + "/Documents/" + arr[i]);
                    i++;
                }
            }
}
}


<script>
            $(function () {
                $('#FileUpload1').change(function () {
                    var fp = $("#FileUpload1");
                    var lg = fp[0].files.length;
                    var items = fp[0].files;
                    if (lg > 0) {
                        for (var i = 0; i < lg; i++) {
                            var fileName = items[i].name;
                            $("#ulList").append("<li>" + fileName + "</li>");
                        }
                    }
                })
            })
        </script>

Thanks

Answer 1

User-2054057000 posted

I think your files are getting overwritten because the names of them are same. So kindly give the filies unique name. You have to add unique name to the files in the below line. Ex. you can add a guid value.

uploadedFile.SaveAs(Server.MapPath("~") + "/Documents/" + Guid.NewGuid() +arr[i]);

Answer 2

User-1499457942 posted

Hi

  All files have different names. When i select then collectively then it works ok. But when i select 1 & then Browse files again and select file then only last files gets saved.

Thanks

Answer 3

User-893317190 posted

Hi JagjitSingh,

It is a pity. This is how file control works. If you only choose one file at one time, the second will cover the first.

If you want the user to choose one file at a time to upload multiple files, you could save the files in an array and use ajax to upload files.

Below is my code.

 <form id="form1" runat="server">
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
        <input id="Button1" type="button" value="button" onclick="saveFiles()" />
      
          <script>


  var tempfiles=[];//use an array to store all the files
function saveFiles(){
    var formData = new FormData();
    for (var i = 0; i < tempfiles.length; i++) {
   formData.append('files',tempfiles[i]);//get all the files and add it into formData
      
    }

   
    $.ajax({  //send request containing files to server
    url: '/Services/upload.ashx',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
    }).done(function (res) {
        console.log(res); // if success
        }).fail(function (res) { }); 
}



    $(function(){

$("#FileUpload1").change(function(){
   for(var i =0 ; i<this.files.length;i++)//put all the files into the array
   tempfiles.push(this.files[i]);
      
})

})
    </script>
    </form>

The ashx.

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
         HttpFileCollection con=   context.Request.Files;
            context.Response.Write(con.Count);
        }

The result.

Best regards,

Ackerly Xu