How do I implement multiple upload using Javascript?


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: How do I implement multiple upload using Javascript?

  1. #1
    Join Date
    Dec 2008
    Location
    *****, Nigeria
    Posts
    62

    How do I implement multiple upload using Javascript?

    Hi,

    I have used asp.net file upload control but it can only upload one file at a time and it blocks the UI during upload(synchronous). I however need to upload many files at once. I have not tried the one that comes with Ajax Control toolkit but I got another one. It works fine as in I can browse and choose more than one file at a time. The problem is I can't get access to the files that i choose on the client because the control is an input html control and I can't access it on the server side (C# code behind).

    What am I leaving out? Please someone help...
    The details are below:
    Code:
    var x = this.Page.FindControl("FileUpload1");
    
                    lbuploadmessage.Text = x.GetType().ToString();
    
                  HttpFileCollection hfc = Request.Files; 
                    List<L2SQLData.PatientFile> list = new List<L2SQLData.PatientFile>();
                    for (int i = 0; i < hfc.Count; i++)
                    {
                        HttpPostedFile hpf = hfc[i];
                        if (hpf.ContentLength > 0 && hpf.ContentLength < 1024000)
                        {
                            string filename = Path.GetFileName(hpf.FileName);
                            string ext = Path.GetExtension(hpf.FileName);
                            var guidname = Guid.NewGuid().ToString();
                            //FileUpload1.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext);
                        
                            hpf.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext );
                            lbuploadmessage.Text = "Upload status:" + hpf.FileName + " successfully uploaded!";
    As you can see I named the control-"FileUpload1" but at runtime (Debug) the object x is null and Request.Files collection that's supposed to contain the browsed files is empty too. The multi - upload control looks like this:

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

    with two scripts i added as follows:

    <script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
    <script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

    So what did I leave out?

    Cheers
    Mobile: +234 706 042 6036
    Email: charles@hedonmark.com
    Website: www.hedonmark.com

    “To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
    —Ralph Waldo Emerson

  2. #2
    Join Date
    Dec 2008
    Location
    *****, Nigeria
    Posts
    62
    Hi guys,
    I got the javascript mark-up from this site-http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Uploading. I hope someone can make sense out of this.

    The author said:
    Make sure your form has method=POST and enctype=multipart/form-data
    I am using asp.net forms. How can I ensure this directive he gave is followed or implemented?Thanks
    Mobile: +234 706 042 6036
    Email: charles@hedonmark.com
    Website: www.hedonmark.com

    “To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
    —Ralph Waldo Emerson

  3. #3
    Join Date
    Dec 2008
    Location
    *****, Nigeria
    Posts
    62
    I finally found the missing link at http://docs.jquery.com/Tutorials:Mul...e_Upload_Magic

    Code:
    var fileMax = 3;
    
    $("input[@type=file]").change(function(){
       doIt(this, fileMax);
     });
    These lines are all in the designer mark up.On the server side (C# code behind) in the upload button place this:

    Code:
    HttpFileCollection hfc = Request.Files; 
            List<L2SQLData.PatientFile> list = new List<L2SQLData.PatientFile>();
            for (int i = 0; i < hfc.Count; i++)
            {
                HttpPostedFile hpf = hfc[i];
                if (hpf.ContentLength > 0 && hpf.ContentLength < 1024000)
                {
                    string filename = Path.GetFileName(hpf.FileName);
                    string ext = Path.GetExtension(hpf.FileName);
                    var guidname = Guid.NewGuid().ToString();
    
    
         hpf.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext );
         lbuploadmessage.Text = "Upload status:" + hpf.FileName + " successfully uploaded!";
    Thanks for the assistance.
    Mobile: +234 706 042 6036
    Email: charles@hedonmark.com
    Website: www.hedonmark.com

    “To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
    —Ralph Waldo Emerson

Similar Threads

  1. Replies: 7
    Last Post: 03-17-2008, 11:18 AM
  2. Replies: 3
    Last Post: 09-20-2007, 08:34 PM
  3. multiple files upload
    By amyzhao in forum ASP.NET
    Replies: 2
    Last Post: 07-19-2007, 03:40 PM
  4. Replies: 1
    Last Post: 11-11-2005, 09:39 AM
  5. Sample Sites.
    By Murray Foxcroft in forum Web
    Replies: 5
    Last Post: 11-02-2000, 03:42 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center