Multiple File Upload using JQuery and C#

Question

I am trying to perform a file upload using JQuery and c#, but I am having a lot of problems. I can't figure out how to get the file to upload. It works fine if I use FileUpload, but I am allowing the user to dynamically add files, and so I am using Jquery (ajax post to another file) in order to process the file. First I was getting a POST and enctype error, but now it just isn't doing anything. Firebug is showing me that the ajax code is failing, but doesn't tell me anything else.

Here is my jquery:

    function AddDocumentsDatabase() {
    $('input:file').each(function (index) {
        var fileName = $(this).val();

        $.ajax(
        {
            type: "POST",
            url: "../ajaxURLs/InsertDocument.aspx?requestNumber=" + reqNum + "&fileName=" + fileName,
            contentType: 'multipart/form-data',
            cache: false,
            success: function (html) {
                alert("File Inserted!")
            }
        }
        );
    });
}

And here is the InsertDocument.aspx code:

RequestDB db = new RequestDB();
    ApplicationFunctions app = new ApplicationFunctions();

    protected void Page_Load(object sender, EventArgs e)
{
    Response.Write("Hello");
    foreach (string key in Request.Form)
    {
        if (!key.StartsWith("fleBrowse")) continue;
        {
            Response.Write(Request.Form[key].GetType());
        }

    }
}

If it is something really easy, I apologize, my mind isn't running at full speed, right now. Any suggestions are greatly appreciated.

Implementing your own asynchronous FileUpload is a huge task, depending on browser support (HTML5, Flash, ...) You should check for existing implementations. I am quite happy with plupload : plupload.com — jbl
– jbl, Commented Mar 27, 2012 at 19:35
Agreed - no need to re-invent this wheel. Especially since jQuery has no built-in functionality to actually post the contents of your selected file to the server - the code you've posted above will send the filename, but not the file itself, so your server won't be able to do much wit it. — Dave
– Dave, Commented Mar 27, 2012 at 19:52

Ethan Brown · Accepted Answer · 2012-03-27 19:44:46Z

2

I agree with shawleigh17; it's a big job, and others have done it well. I've used jQuery FileUpload (http://blueimp.github.com/jQuery-File-Upload/) with great success. However, if you do want to try to debug your code, try adding an error function to your ajax call to debug:

$.ajax(
{
  type: "POST",
  url: "../ajaxURLs/InsertDocument.aspx?requestNumber=" + reqNum + "&fileName=" + fileName,
  contentType: 'multipart/form-data',
  cache: false,
  success: function (html) {
    alert("File Inserted!")
  },
  error(jqXHR, textStatus, errorThrown) {
    alert( "Error: " + textStatus + ": " + errorThrown );
  }
});

answered Mar 27, 2012 at 19:44

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krunal Mevada · Accepted Answer · 2012-03-30 08:07:49Z

0

try this one which given blow link :

http://www.dotnetcurry.com/ShowArticle.aspx?ID=317

answered Mar 30, 2012 at 8:07

Krunal Mevada

1,6631 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Multiple File Upload using JQuery and C#

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related