Multiple File Upload

first make sure you have 'multipart' enctype in the form tag, which enables file uploading:

<form method='post' enctype='multipart/form-data' action=''>

Are you able to select multiple files in the first place? Multi file uploads are only available in HTML5.

Your line 6 is wrong, you append a string : "multifileToUpload[ i ]"
and not "multifileToUpload[0]", "multifileToUpload[1]",

Check this page, Manually Creating a FormData object section, put theses lines outside the loop and replace :
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
by :
fd.append("fileToUpload", document.getElementById('fileToUpload').files[ i ]);

@kozaiwaniec. Yes I have the multipart/form-data in my post.

<form id="form2" enctype="multipart/form-data" method="post" action="">

@leakim971. Can you post the link to Manually Creating a FormData object.

my bad : http://www.matlus.com/html5-file-upload-with-progress/

Yes I use that as my code. I am trying to modify it to accept multiple file uploads. The code works great for single file uploads.

you put the main part in the loop. Move it outside the loop

Nothing happens. Here is the code I have now....

      function multiuploadFile() {
        var upr = document.getElementById("multifileToUpload");
        var fd = new FormData();
        fd.append("multifileToUpload", document.getElementById('multifileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
		
                      for(var i=0, j=upr.files.length; i<j; i++) 
		{   
        xhr.upload.addEventListener("progress", multiuploadProgress, false);
        xhr.addEventListener("load", multiuploadComplete, false);
        xhr.addEventListener("error", multiuploadFailed, false);
        xhr.addEventListener("abort", multiuploadCanceled, false);
        xhr.open("POST", "MultiUpload.aspx");
		}
      }

Select allOpen in new window

line 4, you add a file :
to add each file, put this line inside the loop and use the index :
document.getElementById('multifileToUpload').files[ i ]

It does not work

      function multiuploadFile() {
		var upr = document.getElementById("multifileToUpload");
		var fd = new FormData();
        var xhr = new XMLHttpRequest();
		for(var i=0, j=upr.files.length; i<j; i++) 
		{
		fd.append("multifileToUpload", document.getElementById('multifileToUpload').files[i]);   
        xhr.upload.addEventListener("progress", multiuploadProgress, false);
        xhr.addEventListener("load", multiuploadComplete, false);
        xhr.addEventListener("error", multiuploadFailed, false);
        xhr.addEventListener("abort", multiuploadCanceled, false);
        xhr.open("POST", "MultiUpload.aspx");
		}
      }

Select allOpen in new window

Yes that works but the files are not uploading. I have used this script before so I am not sure why it is not working..

protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection uploadedFiles = Request.Files;

        for (int i = 0; i < uploadedFiles.Count; i++)
        {
            HttpPostedFile file = uploadedFiles;

            try
            {
                if (file.ContentLength > 0)
                {
                    string filename = Path.GetFileName(file.FileName);
                    file.SaveAs(Server.MapPath("~/Videos/") + filename); 

                }
            }
      }    


    } 

Select allOpen in new window

you're using ajax, and not postback of your page
check this article for example :
http://jquery-with-asp.net/2012/02/ajax-file-upload-with-asp-net-using-valums-script/

especially the Third step about FilesUploader : IHttpHandler

When I do a single file upload this script works and I use a postback for a single upload. Shouldn't it work the same way?

    protected void Page_Load(object sender, EventArgs e)
    {

                HttpPostedFile file = Request.Files["fileToUpload"];
                string filename = Path.GetFileName(file.FileName);
                file.SaveAs(Server.MapPath("~/Videos/") + filename); 
	}

Select allOpen in new window