locked
Requesting Multiple Images RRS feed

  • Question

  • User-735851359 posted

    Hello,

    I am trying to change my old code to new one to select multiple images at once.

    My previous code:

    @{    
    if (IsPost)
        {
       ...
            var numFiles = Request.Files.Count;
            if(numFiles > 0)
            {
                for (int i = 0; i < numFiles; i++)
                {
                    var file = Request.Files[i];
                    if (file.ContentLength > 0)
                    {
                        var image = new WebImage(file.InputStream);
                        var imageFileName = Path.GetFileName(file.FileName);
                        var imageGuid = Guid.NewGuid().ToString();
                        var fileName = imageGuid + "_"  + imageFileName;
                        var thumbFileName = imageGuid + "_thumb_" + imageFileName;
                        var location = Path.Combine(path, fileName);
                        image.Resize(1024 , 768 , preventEnlarge:  true);
                        image.Save(location, "jpg");
                       ...
                    }                
                }
                Response.Redirect("~/Admin/cpshowGallery?fld=" + gnn);
            }
            else{
                er = "At least select one image..";
            }
       }
        
    }
    <form method="post" enctype="multipart/form-data">
        <fieldset class="no-legend">
            <legend>Resim Ekle</legend>
            @FileUpload.GetHtml(addText: "Add more", uploadText: "upload", includeFormTag: false)
            <input type="submit" value="Yükle" title="Resim yükle" />
        </fieldset>
    </form>

    I changed the form part (getting some help here..) like this:

    <form method="post" enctype="multipart/form-data">
        <fieldset class="no-legend">
            <legend>Add pictures</legend>
            <input type="file" id="files" multiple />
            <pre id="filelist" style="display:none;"></pre>
            <input type="submit" value="Upload" title="Upload images" />
        </fieldset>
    </form>
    <script type='text/javascript'>
        document.getElementById('files').addEventListener('change', function(e) {
            var list = document.getElementById('filelist');
            list.innerHTML = '';
            for (var i=0;i<this.files.length;i++) {
                list.innerHTML += (i+1) + '. ' + this.files[i].name + '\n';
            }
            if (list.innerHTML == '') list.style.display = 'none';
            else list.style.display = 'block';
        });
    </script>

    Selecting the files and showing the selected images work fine. 

    My question: How can I request and save them like in my previous example?

    Thanx in advance..

    Thursday, January 8, 2015 10:15 AM

Answers

  • User-821857111 posted

    <input type="file" id="files" multiple />

    The input needs a name attribute otherwise Request.Files.Count will be 0.

    <input type="file" id="files" name="files" multiple />



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 12, 2015 6:26 AM

All replies

  • User-821857111 posted

    I'm not sure what your issue is. Your server-side code already seems to manage multiple files.

    Thursday, January 8, 2015 5:08 PM
  • User-735851359 posted

    The following code is not working after changing the FORM to MULTIPLE.

    @{    
    if (IsPost)
        {
       ...
            var numFiles = Request.Files.Count;
            if(numFiles > 0)
            {
                for (int i = 0; i < numFiles; i++)
                {
                    var file = Request.Files[i];
                    if (file.ContentLength > 0)
                    {
                        var image = new WebImage(file.InputStream);
                        var imageFileName = Path.GetFileName(file.FileName);
                        var imageGuid = Guid.NewGuid().ToString();
                        var fileName = imageGuid + "_"  + imageFileName;
                        var thumbFileName = imageGuid + "_thumb_" + imageFileName;
                        var location = Path.Combine(path, fileName);
                        image.Resize(1024 , 768 , preventEnlarge:  true);
                        image.Save(location, "jpg");
                       ...
                    }                
                }
                Response.Redirect("~/Admin/cpshowGallery?fld=" + gnn);
            }
            else{
                er = "At least select one image..";
            }
       }
        
    }
    Friday, January 9, 2015 2:29 PM
  • User-821857111 posted

    Not all browsers support multiple when it is applied to a file input: http://caniuse.com/#feat=input-file-multiple

    Friday, January 9, 2015 2:54 PM
  • User-735851359 posted

    In fact, the browser is not important, because I use it i my Admin panel, so only I use it. I use Chrome, so it works.

    Saturday, January 10, 2015 12:51 PM
  • User1176121428 posted

    Hi ayanmesut,

    Thanks for your post.

    You want to upload the multiple images ,so I did a simple sample:

    aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="uploadmultipleImages.aspx.cs" Inherits="listboxdemo.uploadmultipleImages" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
        <asp:button runat="server" text="uploadAll" ID="btnUpload" OnClick="btnUpload_Click"/>
        </div>
        </form>
    </body>
    </html>
    

    aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace listboxdemo
    {
        public partial class uploadmultipleImages : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnUpload_Click(object sender, EventArgs e)
            {
                HttpFileCollection HFC = Request.Files;
                for (int i = 0; i < HFC.Count; i++)
                {
                    HttpPostedFile hpf = HFC[i];
                    if (hpf.ContentLength > 0)
                    {
                        hpf.SaveAs(Server.MapPath("Images") + "\\" + Path.GetFileName(hpf.FileName));
                       
                    }
                }
                Response.Write(" Uploaded Successfully <br/>"); 
                
            }
    
           
        }
    }

    It worked on my side,you can refer to this and modify and use it .

    Hope this can be helpful.

    Best Regards,

    Eileen

    Monday, January 12, 2015 4:35 AM
  • User-821857111 posted

    <input type="file" id="files" multiple />

    The input needs a name attribute otherwise Request.Files.Count will be 0.

    <input type="file" id="files" name="files" multiple />



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 12, 2015 6:26 AM