locked
Upload more than one image at a time in ASP.NET webpages razor cshtml syntax webmatrix RRS feed

  • Question

  • User1450159794 posted

    I have a app that can upload an Image in ASP.NET Webpages (Razor syntax)

    What I want is to allow Uploading more than one Image .

    I used bellow code but was not successful.

    @{
              WebImage photo = null;
              WebImage photo2 = null;

              var newFileName2 = "";
              var photoFilename2 = "";
              var name2 = "";
              var imagePathZ2 = "";

              int itemID2 = 0;
              int indexvalue2 = 0;
              //---------------photo 2---------------------
              int itemID = 0;
              int indexvalue = 0;

              var photoFilename = "";
              var newFileName = "";
              var name = "";
              var imagePathZ = "";
             //---------------photo 2---------------------


              var ProductId = UrlData[0];

             if (IsPost)
             {
                   if (!Request["Upload11"].IsEmpty())
                   {

                         photo = WebImage.GetImageFromRequest();
                         if (photo != null)
                         {

                           itemID = 100;

                           photoFilename = "myfile" + itemID;

                           newFileName = photo.FileName;

                           newFileName = newFileName.ToString();
                           indexvalue = newFileName.IndexOf('.');

                           name = @newFileName.Substring(indexvalue, 4);
                           photoFilename = photoFilename + name;

                          //-------Save Photo to folder--------------------
                           newFileName = photo.FileName;
                          imagePathZ = @"/Images/" + photoFilename;
                          photo.Save(@"~/" + imagePathZ);
                     }

               }


               if (!Request["Upload22"].IsEmpty())
               {
                        photo2 = WebImage.GetImageFromRequest();
                        if (photo2 != null)
                        {

                           itemID2 = 200;

                           photoFilename2 = "myfilee" + itemID2;

                           newFileName2 = photo2.FileName;

                           newFileName2 = newFileName2.ToString();
                           indexvalue2 = newFileName2.IndexOf('.');

                           name2 = @newFileName2.Substring(indexvalue2, 4);
                           photoFilename2 = photoFilename2 + name2;

                           //-------Save Photo to folder--------------------
                          newFileName2 = photo2.FileName;
                          imagePathZ2 = @"/Images/" + photoFilename2;
                          photo2.Save(@"~/" + imagePathZ2);


                      }
            }

        }

    }

    <html>
    <head>

    <title>testing image Upload</title>
    </head>

    <body>

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

              <br /><br />
              <legend id="Up"> Edit Item Detailssssss </legend>

              <label for="Image">Image : </label>
              <input type="file" name="Image" size="65" />
             <br /><br />
             <div id="UploadImage">

                  @if (imagePathZ != "")
                   {
                         <div class="container"><img src=@imagePathZ alt="img" /></div>

                    }

    </div>

    <input type="submit" value="Upload" name="Upload11" />


    <!----------UploadImage 222222222 -------------------->
          <br /><br />
           <label for="Image">Imageee : </label>
           <input type="file" name="Image" size="65" />
           <br /><br />
           <div id="UploadImage2">

            @if (imagePathZ2 != "")
            {
                  <div class="container"><img src=@imagePathZ2 alt="img" /></div>

             }
           </div>

          <input type="submit" value="Upload" name="Upload22" />

    </fieldset>
    </form>


    </body>
    </html>

    Can someone help please.

    Thursday, June 1, 2017 2:35 PM

Answers

  • User1967761114 posted

    Hi deelliiee,

    According to your last reply,you could use Server.MapPath("~/Images") to build the save path.

    See the following code:

    @{
        Layout = null;
        if (Request.Files.Count > 0)
        {
            //you could use the following code to get the uploaded file by the file uploader control of Image1.
            //var file1=Request.Files["Image1"];
            //file1.SaveAs("save path");
            foreach (string name in Request.Files)
            {
                //at here, name is the name of the file uploader control
                var file = Request.Files[name];
                if (file.ContentLength > 0)
                {
                    //save file
                    var dir = Server.MapPath("~/Images");
                    if (!System.IO.Directory.Exists(dir))
                    {
                        System.IO.Directory.CreateDirectory(dir);
                    }
                    file.SaveAs(System.IO.Path.Combine(dir, Guid.NewGuid().ToString() + "." + System.IO.Path.GetExtension(file.FileName)));
                }
            }
        }
    }

    If you have any other questions, please feel free to contact me any time.

    Best Regards

    Even

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 2, 2017 6:18 AM

All replies

  • User1967761114 posted

    Hi deelliiee,

    According to your description, you want to use more file uploaders in single page to upload file, you could use Request.Files[“file control name”] to get the uploaded file.

    See the following code:

    @{
        Layout = null;
        if (Request.Files.Count > 0)
        {
            //you could use the following code to get the uploaded file by the file uploader control of Image1.
            //var file1=Request.Files["Image1"];
            //file1.SaveAs("save path");
            foreach (string name in Request.Files)
            {
                //at here, name is the name of the file uploader control
                var file = Request.Files[name];
                if (file.ContentLength > 0)
                {
                    //save file
                    file.SaveAs(System.IO.Path.Combine("D:", Guid.NewGuid().ToString() + "." + System.IO.Path.GetExtension(file.FileName)));
                }
            }
        }
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Test1</title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend> uploader1 </legend>
                <input type="file" name="Image1" size="65" />
            </fieldset>
            <fieldset>
                <legend> uploader2 </legend>
                <input type="file" name="Image2" size="65" />
            </fieldset>
            <fieldset>
                <legend> uploader3 </legend>
                <input type="file" name="Image3" size="65" />
            </fieldset>
            <input type="submit" value="Upload" />
        </form>
    </body>
    </html>

    If you have any other questions, please feel free to contact me any time.

    Best Regards

    Even

    Friday, June 2, 2017 5:39 AM
  • User1450159794 posted

    Hi EvenMa ,

    Thank you for the Answer.I have few more questions to ask.Its a great relief that you answered.

    1. I need to save images in my "image" folder which reside in my solution folder. So that I can display the image in the page just as I save the image in the folder

        (just as I pressed Upload Button) 

       - Do you have any other option than hard coding D: in the path ?

    Friday, June 2, 2017 6:10 AM
  • User1967761114 posted

    Hi deelliiee,

    According to your last reply,you could use Server.MapPath("~/Images") to build the save path.

    See the following code:

    @{
        Layout = null;
        if (Request.Files.Count > 0)
        {
            //you could use the following code to get the uploaded file by the file uploader control of Image1.
            //var file1=Request.Files["Image1"];
            //file1.SaveAs("save path");
            foreach (string name in Request.Files)
            {
                //at here, name is the name of the file uploader control
                var file = Request.Files[name];
                if (file.ContentLength > 0)
                {
                    //save file
                    var dir = Server.MapPath("~/Images");
                    if (!System.IO.Directory.Exists(dir))
                    {
                        System.IO.Directory.CreateDirectory(dir);
                    }
                    file.SaveAs(System.IO.Path.Combine(dir, Guid.NewGuid().ToString() + "." + System.IO.Path.GetExtension(file.FileName)));
                }
            }
        }
    }

    If you have any other questions, please feel free to contact me any time.

    Best Regards

    Even

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 2, 2017 6:18 AM
  • User496344458 posted

    Great. I had a similar problem and this has helped me.

    Thanks you very much

    Saturday, June 10, 2017 1:06 PM