ASP.net – Multiple Upload with jQuery Multiple File Upload Plugin

I know how to upload with ASP.net’s FileUpload control.

What I want to do is use this jQuery Multiple File Upload Plugin to upload multiple files.

Here is exactly what it does when multiple files are selected for upload:

<input type="file class="multi MultiFile" id="MultiFile1_F3" name="file1[]" style="position: absolute; top: -3000px;">

But I cannot figure out how to manipulate these files from asp.net.
I have tried using Request.Files as the following link instructs:
ASP.Net Upload of multiple files after choosing them from jQuery

That doesn’t work. I think that only works for controls marked with runat=”server” at compile time.

Does anyone know how to do this? Maybe something in Request.Form…?

Thanks for your help!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Two things to check:

• Make sure your form has the enctype=”multipart/form-data” attribute set. This is required to enable uploads.
• Make sure all file inputs have both id and name attributes set. For some reason, if you don’t set both, wierd things happen.

Also, runat=”server” shouldn’t have anything to do with whether Request.Files works or not — this is more an issue of the browser actually posting the files.

Method 2

This jQuery plugin was giving every generated input control the exact same name attribute.

For this reason, the files were not posting.

I built my own javascript solution.

I will post a link to the code in a comment.

Edit

I revisited this and found that what I was trying to do wasn’t very difficult at all. I got the the jquery multiple file upload plugin to work fine with my aspx form. I don’t know why I was having so much trouble before.

1.) Include the jQuery library on the web form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />

2.) Reference the multiple file plugin on the web form (Download it here):

<script src="jquery.MultiFile.pack.js" type="text/javascript">

3.) Add a file input on your web form with class=”multi”:

<input type="file" class="multi" />

4.) Execute some code or call a method like this on form submission:

    void SendMail(string from, string to, string subject, string body, string smtpServer)
    {
        // create mail message
        MailMessage mail = new MailMessage(from, to, subject, body);

        // attach posted files
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFile file = Request.Files[i];
            mail.Attachments.Add(new Attachment(file.InputStream, file.FileName));
        }

        //send email
        new SmtpClient(smtpServer).Send(mail);
    }

This is all that I had to do to attach multiple files to an email sent from an aspx page.

If you want to increase the total size of the files that can be uploaded, add this to your web.config file:

<system.web>
    <httpRuntime executionTimeout="240" maxRequestLength="30720"/>
</system.web>

The executionTimeout is measured in seconds and maxRequestLength is measured in kilobytes. In this example, the request will timeout after 4 minutes and will allow a 30mb request.

Method 3

It’s been a bit since I did that kind of thing in .NET, but once you begin cloning form inputs dynamically, I think you have to go out to Request.Form and find the submitted values manually. I wrote up the jQuery code to clone some (non-file) inputs with sequential identifiers here. As long as you have unique identifiers, you can run a loop to see if Request.Form[“MultiFile1_F” + counter] exists and go from there.

Method 4

I highly recommend Uploadify as a mulitple file uploader. It uses jquery and flash to allow the user to upload multiple files at once through ctrl + clicking on all desired files. It then displays a queue of the files uploading and removes the file from the queue on completion. It also allows you to specify which extension to allow the user to upload as well which prevents you from having to do extension validation.

EDIT:
If you dont want to use flash Ajax Upload works really well too. If users on my site company’s site dont have the right version of flash that works best with uploadify, I switch to Ajax Upload. They both work very well for me.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0