Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Multiple File Upload

Posted on 2012-08-11
14
Medium Priority
?
744 Views
Last Modified: 2012-08-27
Hello:

I am trying to upload multiple files. However, nothing happens

function multiuploadFile() {
		var upr = document.getElementById("multifileToUpload");
		for(var i=0, j=upr.files.length; i<j; i++) 
		{   
		var fd = new FormData();
        fd.append("multifileToUpload[i]");
        var xhr = new XMLHttpRequest();
        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");
		}
      }

Open in new window


 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); 

                }
            }
      }    


    }

Open in new window

0
Comment
Question by:RecipeDan
  • 7
  • 6
14 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38285322
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.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38285626
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 ]);
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38286146
@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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Expert Comment

by:leakim971
ID: 38286148
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38286269
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.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38286426
you put the main part in the loop. Move it outside the loop
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38287674
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");
		}
      }

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 38287756
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 ]
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38290287
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");
		}
      }

Open in new window

0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38290353
The following work fine for me, I added bracket for the field name : multifileToUpload[]

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

Open in new window

0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38291817
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); 

                }
            }
      }    


    } 

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 38291848
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/
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38291850
especially the Third step about FilesUploader : IHttpHandler
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 38294487
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); 
	}

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question