Subir varios archivos en ASP.NET usando jQuery

Subir varios archivos en ASP.NET usando jQuery, es una forma muy rápida y sencilla para subir archivos a tu servidor (alojamiento web). Primero agregamos un control FileUpload de asp.net, agregamos un botón, las referencias jQuery y el estilo CSS, y al final poner el código de servidor para subir los archivos y listo.


jQuery crea una lista de controles FileUpload guardados en StateView, por lo que solo realizamos un ciclo para recorrer HttpFileCollection y empezar a guardar los archivos en el servidor.

 

Es posible que desees saber/aprender que es lo que hace el jQuery, para ser capaz de personalizar todas las acciones. La css se puede modificar muy fácilmente.

Paso 1: hay que descargar: jQuery 1.3.2, jQuery VS 2008 Doc  y Multiple File Upload PlugIn. Cuando los hayas descargado, ponlos en la carpeta de tus Script.

Paso 2: Crear una página y agregamos las referencias de los script.

    <script src="Js/jquery-1.3.2.js"></script>
    <script src="Js/jquery.MultiFile.js"></script>

Paso 3: Añadir los estilos CSS.

    <style type="text/css">
        .MultiFile-label a {
            width: 50px;
            height: 30px;
            background-color: #fb4141;
            color: #FFF;
            border: 0;
            padding: 3px 7px;
            text-decoration: none;
        }

            .MultiFile-label a:hover {
                width: 50px;
                height: 30px;
                background-color: red;
                color: #e5e5e5;
                border: 0;
                padding: 3px 7px;
                text-decoration: none;
            }

        .MultiFile-list {
            height: 300px;
            width: 300px;
            padding: 10px 16px;
            border: dashed silver 1px;
            background-color: #f9f4f4;
        }

        .MultiFile-label {
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 10px;
        }

        .Multifile-UploadAllButton {
            width: 75px;
            height: 30px;
            background-color: #6262e9;
            color: #FFF;
            border: 0;
            text-decoration: none;
            text-align: center;
        }

            .Multifile-UploadAllButton:hover {
                width: 75px;
                height: 30px;
                background-color: #2f2fe7;
                color: #e5e5e5;
                border: 0;
                text-decoration: none;
                text-align: center;
                cursor: pointer;
            }

        .Multifile-UploadAll-div-Button {
            text-align: right;
        }

        .Multifile-vk-panel {
            width: 335px;
            height: 350px;
        }
    </style>

Paso 3: Añadir los controles.

        <div class="Multifile-vk-panel">
                <div>
                    <asp:FileUpload ID="FileUploadVKSample" runat="server" class="multi" accept="gif|jpg|png|bmp" maxlength="7" />
                </div>
                <div class="Multifile-UploadAll-div-Button">
                    <asp:Button ID="btnUpload" runat="server" Text="Upload All" CssClass="Multifile-UploadAllButton" OnClick="btnUpload_Click" />
                </div>
            </div>
        </div>

Paso 4: Añadir el código de servidor.

   Protected Sub btnUpload_Click(sender As Object, e As EventArgs) Handles btnUpload.Click
        Try
            'Get the HttpFileCollection
            Dim hfCollection As HttpFileCollection = Request.Files
            For i As Integer = 0 To hfCollection.Count - 1
                'Get the specific HttpPostedFile by index
                Dim hPostedFile As HttpPostedFile = hfCollection(i)
                If hPostedFile.ContentLength > 0 Then
                    'Upload/save to the server
                    hPostedFile.SaveAs(Server.MapPath("~/SubirMultiplesArchivos/") & "\" & System.IO.Path.GetFileName(hPostedFile.FileName))

                    'Report the file was uploaded - you can customize this part -
                    Response.Write((("<b>File: </b>" & hPostedFile.FileName & " <b>Size:</b> ") & hPostedFile.ContentLength & " <b>Type:</b> ") & hPostedFile.ContentType & " Uploaded Successfully <br/>")
                End If
            Next
            'TOOD: report if a error was fired.
        Catch ex As Exception

        End Try
    End Sub

RESULTADO:

File upload with asp.net and jquery

IMPORTANTE

Recuerda que debes modificar el "el máximo tamaño de los archivos" en el web.config, esto para que permita cargar archivos más grandes. El diseño tu se lo puedes dar, ese solo tu imaginación y tu creatividad son el limite.

Espero que esto te ayude! Deja tus comentarios y sugerencias, te lo agradeceré mucho.

En esta liga puedes descargar el ejemplo completo.

Artículos relacionados
8 Comentarios
  • Miguel Angel Comentar
    Thursday, November 7, 2013

    hola, he probado el código pero me marca error, y me muestra el siguiente error: El archivo '/Default.aspx.vb' no existe. ¿En donde debería colocarse?, por que ahora lo tengo en la misma carpeta que la pagina principal

    • José I. Estrada HdzComentar
      Thursday, November 7, 2013

      Hola Miguel Ángel ¿Cómo estas probando el ejemplo? Podrías darme un poco más de información para poder ayudarte Si estas abriendo el ejemplo en Visual Studio tiene que ser de la siguiente manera. 1. Lo descargas 2. Descomprimes la carpeta 3. Abres el Visual Studio 4. Seleccionas “Archivo”, “Abrir Sitio Web” y buscas la carpeta descomprimida la seleccionas y clic en abrir. 5. Te cargara los archivos en el visual studio, solo falta crear una carpeta llamada “UploadFiles” dentro del sitio web. 6. Ejecutas la aplicación y listo. Si sigues teniendo problemas házmelo saber y con gusto sigo apoyándote. Saludos

  • José Hidalgo Comentar
    Tuesday, July 15, 2014

    Bastante útil y sencillo de implementar. Se agradece.

  • marcelo Comentar
    Friday, October 24, 2014

    funciona excelente en local host. pero no logro hacerlo funcionar en mi webside he hecho de todo en el server mapth ../ solo / , etc. y nada

  • juan Comentar
    Thursday, March 26, 2015

    La cargada funciona bien, pero como seria el mostrado de esos archivos guardados

    • Estrada WebGroupComentar
      Thursday, March 26, 2015

      Hola Juan los puedes almacenar en la base de datos y después los lees para mostrarlos, esto yo lo hago solo almaceno el nombre del archivo y después los recupero y armo la liga donde los guarde, si quieres más ayuda con gusto te apoyo. Saludos

  • jmora Comentar
    Friday, May 15, 2015

    Alguien no tiene este codigo en c#

  • ruben Comentar
    Friday, October 16, 2015

    HOLA, donde se guardan los archivos o mejor dicho en que parte del codigo puede incidar la ruta para guardar el archivo.gracias

    • Estrada WebGroupComentar
      Friday, October 16, 2015

      Hola Ruben En la linea siguiente se define la ruta donde se almacena el archivo.
      hPostedFile.SaveAs(Server.MapPath("~/SubirMultiplesArchivos/") & "\" & System.IO.Path.GetFileName(hPostedFile.FileName))

      Tambien puedes crear una variable y asignarle la ruta más o menos así.

      Dim ruta as string = Server.MapPath("~/SubirArchivo/")
      ruta &= System.IO.Path.GetFileName(hPostedFile.FileName))
      hPostedFile.SaveAs(ruta)

  • Javier Comentar
    Friday, May 6, 2016

    Hola, lo primero felicidades por este gran artículo. Me gustaría formularle una duda, si en el "FileUpload" le pongo el atributo multiple="multiple" es decir, que permita seleccionar más ficheros a la vez, cuando acepto los ficheros, solo se pone uno en el cuadro rosa, por tanto, solo es subido uno. ¿Se le ocurre como podría solventarlo? Gracias de antemano!!

  • Luis Reyes Comentar
    Friday, May 4, 2018

    excelente trabajo!!

Enviame un comentario