Subir archivos con ajax y mostrar precarga

21 Sep

Bueno, hace un tiempo publiqué un posteo en donde podíamos subir archivos al servidor en forma asíncrona, ya que Ajax sólo permite enviar texto, mas no archivos, y lo hacíamos mediante un iframe. Sin embargo, un compañero de trabajo me dijo que sí se podían subir archivos evitando el uso de iframe, así que dedico esta publicación justamente a mi amigo y compañero, Alberto ‘Toni’ Mamone.

IMPORTANTE: Antes de comenzar. Esto fue testeado en navegadores viejos como Explorer 7 y no funciona, tendrás que usarlo sólo en navegadores que soporten Html5.

Buscando encontré esto en youtube:

http://www.youtube.com/watch?v=AZJfXr2LZXg

Acá publican un video en dónde se muestra cómo subir archivos al servidor de forma asíncrona y mostrando una precarga.

¡Comencemos!

Para empezar vamos a crear un archivo .php (también puede ser .html) al que yo llamaré index.php:

<!DOCTYPE html>
<html>
   <head>
   <title> Subida y precarga ajax </title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Css -->
   <link href="css/bootstrap.css" rel="stylesheet" media="screen">
   <!-- Javascript -->
   <script src="js/jquery-2.0.2.js"></script>
   <script src="js/upload.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script type="text/javascript">
   function subirArchivos() {
      $("#archivo").upload('subir_archivo.php',
      {
         nombre_archivo: $("#nombre_archivo").val()
      },
      function(respuesta) {
         //Subida finalizada.
         $("#barra_de_progreso").val(0);
         if (respuesta === 1) {
            mostrarRespuesta('El archivo ha sido subido correctamente.', true);
            $("#nombre_archivo, #archivo").val('');
         } else {
            mostrarRespuesta('El archivo NO se ha podido subir.', false);
         }
         mostrarArchivos();
         }, function(progreso, valor) {
            //Barra de progreso.
            $("#barra_de_progreso").val(valor);
         });
   }
   function eliminarArchivos(archivo) {
      $.ajax({
         url: 'eliminar_archivo.php',
         type: 'POST',
         timeout: 10000,
         data: {archivo: archivo},
         error: function() {
            mostrarRespuesta('Error al intentar eliminar el archivo.', false);
         },
         success: function(respuesta) {
            if (respuesta == 1) {
               mostrarRespuesta('El archivo ha sido eliminado.', true);
            } else {
               mostrarRespuesta('Error al intentar eliminar el archivo.', false); 
            }
            mostrarArchivos();
         }
      });
   }
   function mostrarArchivos() {
      $.ajax({
         url: 'mostrar_archivos.php',
         dataType: 'JSON',
         success: function(respuesta) {
            if (respuesta) {
               var html = '';
               for (var i = 0; i < respuesta.length; i++) {
                  if (respuesta[i] != undefined) {
                     html += '<div class="row"> <span class="col-lg-2"> ' + respuesta[i] + ' </span> <div class="col-lg-2"> <a class="eliminar_archivo btn btn-danger" href="javascript:void(0);"> Eliminar </a> </div> </div> <hr />';
                  }
               }
               $("#archivos_subidos").html(html);
            }
         }
      });
   }
   function mostrarRespuesta(mensaje, ok){
      $("#respuesta").removeClass('alert-success').removeClass('alert-danger').html(mensaje);
      if(ok){
         $("#respuesta").addClass('alert-success');
      }else{
         $("#respuesta").addClass('alert-danger');
      }
   }
   $(document).ready(function() {
      mostrarArchivos();
      $("#boton_subir").on('click', function() {
         subirArchivos();
      });
      $("#archivos_subidos").on('click', '.eliminar_archivo', function() {
         var archivo = $(this).parents('.row').eq(0).find('span').text();
         archivo = $.trim(archivo);
         eliminarArchivos(archivo);
      });
   });
   </script>
 </head>
 <body>
    <div class="container">
       <h1> Subida y precarga ajax </h1>
       <div id="respuesta" class="alert"></div>
       <form action="javascript:void(0);">
          <div class="row">
             <div class="col-lg-2"> 
                <label> Nombre el archivo: </label> 
             </div>
             <div class="col-lg-2">
                <input type="text" name="nombre_archivo" id="nombre_archivo" />
             </div>
             <div class="col-lg-2">
                <input type="file" name="archivo" id="archivo" />
             </div> 
          </div>
          <hr />
          <div class="row">
             <div class="col-lg-2">
                <input type="submit" id="boton_subir" value="Subir" class="btn btn-success" />
             </div>
             <div class="col-lg-4">
                <progress id="barra_de_progreso" value="0" max="100"></progress>
             </div>
          </div>
       </form>
       <hr />
       <div id="archivos_subidos"></div>
    </div>
 </body>
</html>

Vamos a analizar el código. En primer lugar cargamos la librería de Twitter Bootstrap para darle un poco de estilo a nuestra página:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
También incluimos la librería de Jquery:
<script src="js/jquery-2.0.2.js"></script>
Y lo más importante es el Javascript upload.js:
<script src="js/upload.js"></script>

Éste será el que nos permitirá subir archivos al servidor con Ajax.
El mismo nos proveerá de un método llamado .upload(), el cual va a recibir cuatro parámetros. El primero será el archivo .php donde se hará la petición. El segundo será un json con variables que serán enviadas al servidor. El tercero será una función que se va a disparar en el momento que el navegador obtenga una respuestas del servidor. Y finalmente, el cuarto parámetro nos irá indicando el porcentaje de la precarga:

La función subirArchivos(), será la encargada de enviar los archivos al servidor en forma asíncrona.
Vamos a crear un archivo llamado subir_archivo.php, el cual tendrá la siguiente acción:
<?php
if (isset($_FILES['archivo'])) {
   $archivo = $_FILES['archivo'];
   $extension = pathinfo($archivo['name'], PATHINFO_EXTENSION);
   $time = time();
   $nombre = "{$_POST['nombre_archivo']}_$time.$extension";
   if (move_uploaded_file($archivo['tmp_name'], "archivos_subidos/$nombre")) {
      echo 1;
   } else {
      echo 0;
   }
}
?>
También crearemos a la misma altura un directorio vacío llamado “archivos_subidos”.
Si ya has programado en PHP, el código debería serte muy sencillo, simplemente se guardará un archivo en la carpeta “archivos_subidos”, y dependiendo de si se ha podido subir o no devolverá un 1, si todo ha salido bien, y 0 si no fue así. Esto le será útil al Javascript que a través de este valor, podrá saber si la subida del archivo ha sido correcta.
Pero también tendremos que listar estos archivos, mediante una acción a la cual llamaremos mostrar_archivos.php:
<?php
$directorio_escaneado = scandir('archivos_subidos');
$archivos = array();
foreach ($directorio_escaneado as $item) {
   if ($item != '.' and $item != '..') {
      $archivos[] = $item;
   }
}
echo json_encode($archivos);
?>
Y otro llamado eliminar_archivo.php:
<?php
if (isset($_POST['archivo'])) {
   $archivo = $_POST['archivo'];
   if (file_exists("archivos_subidos/$archivo")) {
      unlink("archivos_subidos/$archivo");
      echo 1;
   } else {
      echo 0;
   }
}
?>
De este modo podremos subir, listar y eliminar archivos de una carpeta con Ajax.
Saludos!
Redes sociables

    95 thoughts on “Subir archivos con ajax y mostrar precarga

    1. gracias por el script, tengo algunas preguntas. Esto funciona sin ninguna libreria intalada? (APC, uploadprogress, zend opcache, etc). Es necesaria la ver 1.7 de jquery o puedo usar la mas reciente? Que version de PHP? Saludos

      • Orlando cómo estás, gracias a vos por pasarte.

        Respondiendo a tus preguntas:

        – No, no necesitás tener instalada ninguna librería, de hecho de las que nombraste yo no tengo instalado nada de eso y aún así funciona.
        – Yo usé la versión 1.7 Jquery, pero con la última debería funcionar correctamente también.
        – La versión de PHP debería ser desde la 5 para arriba.

        En realidad no depende tanto del servidor (PHP, Asp, Java, RoR, Python, etc), sino del navegador. De hecho algo que me olvidé agregar es que los en navegadores medianamente viejos como Explorer 7 este ejemplo no funciona, supongo que porque está preparado para soportar Html5, pero el archivo upload.js se rompe.

        Saludos!

        • No, sólo Jquery y la librería de upload.js. Bootstrap es para darle un poco de estilo.

          Saludos!

          • Como puedo adaptarlo a mí codigo te lo adjunto, lo que hace es levantar un documento de excel CSV y lo guarda una base de datos.

            $(“#BTN_IMPORT_FORM_MOVE_INVENT”).click(function()
            {
            $(“.error”).fadeOut().remove();
            if ($(“#DELIMITADOR”).val() == “”) {
            $(“#DELIMITADOR”).focus().after(‘Campo requerido, debe elegir un delimitador !!!’);
            return false;
            }
            if ($(“#INPUT_CSV”).val() == “”) {
            $(“#INPUT_CSV”).focus().after(‘No has seleccionado un archivo CSV !!!’);
            return false;
            }
            loading_show();
            var formData = new FormData($(“#IMPORT_FORM_MOVE_INVENT”)[0]);

            $.ajax({
            type: “POST”,
            url: “create/IMPORT_FORM_MOVE_INVENT_CSV.php”,
            data: formData,
            contentType: false,
            processData: false,
            success: function(data)
            {
            $(“#MSJ_IMPORT_FORM_MOVE_INVENT”).html(data);
            $(“#INPUT_CSV”).val(”);
            loading_hide();
            }
            });
            $(“#DELIMITADOR, #INPUT_CSV”).bind(‘blur keyup’, function(){
            if ($(this).val() != “”) {
            $(‘.error’).fadeOut();
            return false;
            }
            });
            return false;
            });

            Saludos

    2. Gracias por compartir con todos nosotros toda esta practica información. Con estos granitos de arena hacemos màs grande la montaña Internet. Enhorabuena por este post.

      Saludos

    3. Muy bueno te felicito. Pero tengo un problemita. En el localhost me funciona correctamente, pero en el servidor me dice “EL archivo NO se ha podido subir”..
      ¿Que puede ser?

      • Tomás, muchas gracias por firmar.

        Mirá, si tu servidor está en Linux lo más probable es que la carpeta donde se guardan los archivos no tiene permisos. Para ello conectate con Filezilla y con el botón derecho del mouse cambia los permisos a 755.

        Fijate, y cualquier cosa me avisás.

        Saludos!

    4. Amigo estoy siguiendo paso a paso tu post pero no veo que los archivos de ejemplo que colocas sirve el mostrar y eliminar archivos, hay que agregar algo adicional??

      • Sí sirven. Esos archivos son las acciones donde se envía la petición Ajax:

        Fijate dentro de index.php en las funciones de Javascript eliminarArchivos() y mostrarArchivos(), las url donde se envía el Ajax.

        Saludos!

    5. Exelente post felicidades por este aporte ,queria consultarle si es posible cambiar la figura de la barra
      gracias

      • Jhon gracias a vos por comentar.

        Bueno, respondiendo a tu pregunta. Fijate esta función:

        $(“#archivo”).upload(‘subir_archivo.php’,
        {
        nombre_archivo: $(“#nombre_archivo”).val()
        },
        function(respuesta) {
        //Subida finalizada.
        $(“#barra_de_progreso”).val(0);
        if (respuesta === 1) {
        alert(‘El archivo ha sido subido correctamente.’);
        } else {
        alert(‘El archivo NO se ha podido subir.’);
        }
        }, function(progreso, valor) {
        //Barra de progreso.
        $(“#barra_de_progreso”).val(valor);
        });

        El útlimo parámetro que recibe el método upload(), es una función de tipo callback:

        function(progreso, valor) {
        ///Barra de progreso.
        $(“#barra_de_progreso”).val(valor);
        }

        Esa función va a dispararse cada vez que el servidor le devuelva al navegador el porcentaje de la precarga. Por tanto ese parámetro “valor”, es que irá subiendo a medida que el archivo se procese, empezando por 1, 2, 3, y así sucesivamente hasta llegar a 100%, que es la carga completa.

        Lo que tendrías que hacer modificar el interior de esa función, agregando tu propio código, y teniendo en cuenta que ese segundo parámetro, “valor”, será el que te irá indicando el porcentaje que lleva la precaga.

        Saludos!

    6. Buenas tardes que buen aporte!!!

      Pero tengo un pequeño problema al intentar cargar un archivo observo el siguiente error en el js upload

      Uncaught TypeError: Cannot set property ‘upload’ of undefined

      No se a que se debe me podrían ayudar a resolver este inconveniente gracias.

      Bendiciones Hermano

      • Miguel, eso pasa porque como dije al principio de la publicación, este ejemplo funciona con los navegadores más nuevos, en versiones medianamente viejas, como Internet Explorer 7, ese archivo upload.js se rompe.

        Es importante tener en cuenta esto, ya que si pensás subirlo a una web, tendrías que tener una sentencia try catch, por si se rompe, darle otra alternativa al usuario para subir archivos.

        Saludos!

    7. Hola tengo un problema, por que me dice que no se puede subir el archivo. Uso linux mint y cambie los permisos de las carpetas a 777 y nada… que puede pasar?
      Te dejo los errores que larga al tratar de subir un archivo con firefox:

      El uso de getPreventDefault() está desaprobado. Use en su lugar defaultPrevented. jquery-2.0.2.js:4939
      12:53:33.276 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
      12:57:19.402 POST http://localhost/subidas/subir_archivo.php [HTTP/1.1 200 OK 2ms]
      12:57:19.327 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
      12:57:19.408 GET http://localhost/subidas/mostrar_archivos.php [HTTP/1.0 500 Internal Server Error 1ms]
      12:57:39.692 POST http://localhost/subidas/subir_archivo.php [HTTP/1.1 200 OK 2ms]
      12:57:39.633 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
      12:57:39.696 GET http://localhost/subidas/mostrar_archivos.php [HTTP/1.0 500 Internal Server Error 2ms]

    8. Hola buen aporte oye una duda si quisiera guardar el archivo en una base de datos de mysql dentro de un campo de tipo blob.
      Gracias 🙂

    9. Muchas gracias por compartir, me gustaria saber si se puede cambiar el tamañano del archivo, por que probe con uno de 120mb y me dijo EL ARCHIVO NO SE HA PODIDO SUBIR. SALUDOS

      • Sí, se puede, pero no depende de Javascript, sino de la configuración del servidor. Si usás PHP, deberías ir a tu php.ini, y ahí configurar que la subida permita la cantidad que querés.

        Saludos!

    10. Graaaande Fer! No sabes cuánto código he revisado y es el primero que funciona… lo único que necesitaba era subir un archivo, pero con alguna barrita de estado, jeje. La que funcionaba con un “simple” php y jquery ya la conocía, ahora veré si esta supera la prueba de los nombres.. resulta que tenía problemas con los nombres que tienen caracteres como “ñ” o tildes.. en vuestro código se reemplaza el nombre del archivo, supongo que puedo probar concatenando el nombre original al reemplazo.

      De antemano, muchas gracias!!

    11. Gracias por tu aporte,
      es de gran ayuda que compartas tus conocimiento (Y)

      Sera posible también así como sube las imágenes.
      Dar un clic a su nombre del archivo se pueda visualizar ahí mismo con un popup y agregar un botón para descargar la imagen.???

      Saludos

      • Sí, pero de momento no tengo mucho tiempo para hacerlo.

        Simplemente tendrías que copiar la ruta al archivo en esa ventana.

        Saludos!

    12. Muchísimas gracias por el aporte, lo he probado y funciona a las mil maravillas.

      Ahora estoy intentado que sea multiarchivo pero no consigo hacerlo funcionar.

      ¿Alguna sugerencia?

    13. Hola, quiero agradecerte por el aporte, porque realmente probé muchas cosas y no me funcionaba. Sin embargo, esto funciono perfecto!

    14. HOLA amigo exelento script, una consulta, que tanto puede pesar el archivo a subir? o no tiene limite de archivo?

      • Tezor, a ver. Vos podés filtrar la cantidad de memoria que permitís subirle al usuario. Sin embargo, ésta dependerá también de la configuración del apache.

        Si subiste tu proyecto está en un hosting o servidor compartido, tendrás que consultar la cantidad de memoria que te permite subir. Si ellos te pueden aumentar la memoria de subida, bien, sino vas a tener que conformarte con lo que hay.

        Si en cambio vos sos el que administra el servidor deberías ir a tu archivo php.ini y modificar las líneas:

        upload_max_filesize = xxM y post_max_size = xxM por la cantidad de memoria en MB (donde xx está el número de MB) que necesitás como tope para la subida de archivos.

        Saludos!

      • Sí podés, pero hay que ver si ese archivo .mp3 no supera el número de memoria en MB que tiene permitido el servidor.

    15. Gracias maestro… es el primero que pruebo que funciona perfecto. Me das una mano tremenda con mi proyecto.
      Quería consultarte por una modificacion… será posible mostrar una miniatura o algo asi de la imagen en vez del nombre?

      Desde ya muchisimas gracias

      • Sí, dentro del archivo PHP, deberías devolver la ruta al archivo:

        En lugar de

        echo 1;

        Hacés:

        echo “archivos_subidos/$nombre”

        Y luego esa respuesta te va a servir para mostrar una etiqueta img con la ruta a esa imagen.

        Saludos.

    16. Buenas tardes, muchas gracias por tu aporte, lo estoy adaptando en mi programacion y va de escandalo, me baje los ficheros tal cual para comprobar que tal funcionaban. Y mi pregunta es la siguiente,
      de que sirve el primer input text antes del boton examinar, si al seleccionar el fichero nunca se escribe dentro el nombre?
      Muchas gracias

      • Rocío, ese campo de ingreso es el que te permite ponerle el nombre al archivo, el cual luego se concatena con esos caracteres que se generan automáticamente.

        Saludos!

        • Buenas tardes, muchas gracias por contestar.
          Es totalmente lógico lo q me dices, pero como estaba inmersa en lo que stoy haciendo, en mi mundo de yupi yo decia si ese campo no lo necesito que sentido tiene, pero claro jaja, es mi caso particular ya que no doy opcion de nombrar el fichero al usuario, y la gestión se hace interna.
          La verdad es que lo he tocado entero, adaptado y añadido nuevas funciones, como base para lo que he hecho tu codigo ha sido genial, y me ha solucionado mas de un problema.
          Por otro lado he aprovechado mostrar archivos para mi sección de mostrar las imagenes guardadas en un directorio concreto que el usuario busca, en fin, que muchas muchas gracias.

    17. Hola antes que nada muy buen aporte la verdad me sirvió bastante.
      Tengo una duda como puedo hacerle para evitar que me cabie el nombre de la imagen ?

      • Simplemente tendrías que cambiar:

        $nombre = “{$_POST[‘nombre_archivo’]}_$time.$extension”;

        Por:

        $nombre = “{$_POST[‘nombre_archivo’]}.$extension”;

    18. excelente amigo, muy buen aporte, disculpa una pregunta, yo utilizo tu código para enviar un archivo csv al servidor leo las lineas y lo guardo en la base de datos, mi pregunta es ¿como recibo una confirmación enviada desde el servidor php a el código utilizado?

    19. Que tal, amigo excelente aporte su uso es libre verdad?. Y algo mas al subir archivos de un peso considerable, llega al 100% y ejecutando la funcion php move_uploaded_file, se toma su tiempo. Es posible reflejar ese proceso en la barra de progreso. Pues esta llega a 100 y hay se queda un buen tiempo, cuando en realidad aun no ha finalizado. Gracias por el aporte una vez mas, es admirable ese gran trabajo

      • Sí, es libre, el autor lo subió a un repositorio público de github. Con respecto a lo otro que me decís, no sé, a mí me funciona correctamente, la demora en el 100% es mínima.

        Saludos!

      • Estás usando la librería de Jquery? De ser así, en qué versión? Y en qué navegador y versión lo estás probando?

        Saludos!

    20. muchas gracias!!! por este aporte… se que ocupa tiempo y esfuerzo! mes sirve de mucho para el proyecto en el cual estoy trabajando… una consulta conoces alguna galeria responsive que lea la carpeta contenedora de las imagenes sin necesidad de linkearlas una por una en el html? algo asi ?? un gran abrazo!

        • gracias a vos!!! por ultimo… cuando subis la imagen, tenes que nombrarla, pero cuando sube la imagen le agrega una serie de nros(por ejemplo nombro a la imagen “imagen” y cuando la sube, el nombre es “imagen_45455684”) puede evitarse eso? gracias!!!

          • Sí, vas a tener que modificar:

            $archivo = $_FILES[‘archivo’];
            $extension = pathinfo($archivo[‘name’], PATHINFO_EXTENSION);
            $time = time();
            $nombre = “{$_POST[‘nombre_archivo’]}_$time.$extension”;

            Por:

            $archivo = $_FILES[‘archivo’];
            $extension = pathinfo($archivo[‘name’], PATHINFO_EXTENSION);
            $nombre = “{$_POST[‘nombre_archivo’]}.$extension”;

            El problema es que si un usuario sube un archivo con ese mismo nombre a esa carpeta, entonces el nuevo archivo va a reemplazar al viejo, y así se va a perder el primero.

            Saludos!

            • muchas gracias!!!! la verdad que tengo que capacitarme con el tema de php veo que es algo muy necesario!!!sabes algun codigo para agregarle al index.php para poder visualizar miniaturas de las imagenes? muchas gracias!!!!!! abrazo de gol!!!!

            • Sí, deberías usar thumb para imágenes. Pero también podés usar css para archicar imágenes.

              Saludos!

    21. Hola muchas gracias por el tutorial , las funciones de listar y eliminar de archivos todavía no se encuentra implementadas en un botón??

    22. buenas compa. exelente ejemplo, lo he usado y funciona vastante bien pero mi caso es el de guardar la ruta en la base de datos para luego se buscado el archivo q se quiere. el problema es q guarda el nombre a medias a pesar de q la info se guarda en campos text de 1000 caracteres.

      otra cosa es que yo quiero no solo subir el archivo sino q varia info q paso en otros campos del formulario. En mi ignorancia la pregunta es si el ejemplo tal cual esta pasa toda la info del formulario?

    23. Muchas gracias por el aporte me sirvió de mucho me gustaría tener comunicación contigo y intercambiar códigos…

    24. Hola que tal, buen aporte y el diseño esta genial,

      Sólo una duda, ¿Hay posibilidades de pedir confirmación antes de eliminar un archivo? Digo, por si fue un clic por accidente,

      Saludos
      César

      • Sí, con Javascript podés usar un confirm, tipo:

        if(confirm(‘¿Está seguro que desea eliminar el archivo?’)){
        //Acción de eliminar archivo
        }

        Saludos!

    25. Hola amigo podrías ayudarme.
      en el código de mostrar arvhivo
      mostrar_archivos.php
      como puedo hacer para
      que no me muestre el index.php que tengo en esa carpeta

    26. Hola, esta realmente bueno el tutorial pero tengo un problema.. quisiera cambiar la dirección de envió de archivos , como puedo hacer sin que estos archivos estén en la misma carpeta?

      Aver si me explico yo tengo todos los archivos en miweb.com/hola/subi <— aqui tengo el index

      Pero quiero que los archivos que suba vallan a miweb.com/aquiestan

      Gracias por contestarme saludos

      • no me ignore porfavor – lo ando necesitando!
        Ya que ando fuera y cuando tengo que reemplazar seria una opcion para no entrar por ftp 🙂

    27. Saludos muy bueno el codigo les comento quiero aprender bien ajax y usar json tal vez puedan indicarme algunos link bueno, ahora al punto quiero mostrar tambien la imagen al lado del nombre que se muestra para elimina

    28. Hola, estoy tratando de hacer un upload de archivos grandes, con esto se podrá lograr? tiene alguna limitacion? yo estoy tratando de subir un archivo ZIP de por ejemplo 20MB

      Lo que estuve probando, carga la barra pero al finalizar salta “NO SE HA PODIDO SUBIR EL ARCHIVO”.

      Alguna sugerencia?

      • Te respondo lo mismo que a tezor:

        Si subiste tu proyecto está en un hosting o servidor compartido, tendrás que consultar la cantidad de memoria que te permite subir. Si ellos te pueden aumentar la memoria de subida, bien, sino vas a tener que conformarte con lo que hay.

        Si en cambio vos sos el que administra el servidor deberías ir a tu archivo php.ini y modificar las líneas:

        upload_max_filesize = xxM y post_max_size = xxM por la cantidad de memoria en MB (donde xx está el número de MB) que necesitás como tope para la subida de archivos.

        Saludos!

        • Gracias por seguir respondiendo 2 años despues!
          Si voy a ver por ese lado, probe con muchas formas, php, js, ajax, y todos suben pero ninguno llega a concretar con archivos grandes.
          Estoy haciendo esto para una agencia que me pidió y ellos tienen su servidor de hosting propio, no querian tocar por que le afectan a todos los clientes pero ya estoy cansado de renegar. Así que tendrán que modificar el php.ini.

          Bueno gracias nuevamente!

    29. Estimado, te saludo desde Ecuador, muy interesante tu contribucion, pero no logro que funcione, yo tengo un servidor con ip fija, en el cual he montado mi aplicacion, mis proyectos los creo como carpetas dentro de C:/xampp/htdocs, es decir tu proyecto lo cree como C:/xampp/htdocs/UpFiles y dentro de esta estan index.php, subir_archivo.php, eliminar_archivo.php y mostrar_archivos.php, tambien las carpeta js, donde estan upload.js y jquery-2.0.3.js, por ultimo, esta la carpeta archivos_subidos donde se almacenaran los archivos que quiero subir.

      En la barra de direcciones escribo http://190.10.156.91:8079/UpFiles/index.php, se carga bien, pero al dar clic en Subir, no hace nada, ni un mensaje.

      No se si estoy haciendo bien las referencias a los .js en la cabecera, yo tengo de esta manera:

      Alguna sugerencia?

      Gracias

    30. Continuo con mi comentario, por cierto pongo el texto para enseñarte la forma como tengo las declaraciones en la cabecera pero se borran del comentario.

      Por cierto uso FireFox..

      borre los tag script del inicio y el final y yo le agregue las colmillas dobles para ver si me permitia..

      “script type=’text/javascript’ src=’./js/jquery-2.0.3.js’script”

      “script type=’text/javascript’ src=’./js/upload.js’script”

      “script type=’text/javascript’ src=’./css/bootstrap.min.js’script”

    31. Hola amigo … quiero hacerte una pregunta ¿donde debo modificar para agregar mas campos?.
      Lo he intentado pero solo funciona con un campo tal y como lo tienes tu. Para explicarte mejor doy un ejemplo: Supongamos que quiero pasar por POST el nombre, precio y fecha de caducidad de un producto claro mas la imagen. Como hago para que los datos llegue a subir_archivo.php y poder guardarlos en una base de datos.
      Intente modificando en function subirArchivos algo como esto: nameM: $(“#nameP”).val(), y pasar asi todos los campos pero al llegar a subir_archivo.php solo puedo recuperar uno de los campos.
      Espero me puedas ayudar.

      • Agregás más campos y les ponés id y luego en la parte donde dice:

        {
        nombre_archivo: $(“#nombre_archivo”).val()
        }

        Ahí lo reemplazas por los campos que quieras enviar:

        {
        campo1: $(“#campo1”).val(),
        campo2: $(“#campo2”).val(),
        campo3: $(“#campo3”).val(),
        }

        Y luego desde el PHP los recibís con ese nombre:

        $campo1 = $_POST[‘campo1’];
        $campo2 = $_POST[‘campo2’];
        $campo3 = $_POST[‘campo3’];

        Saludos!

    32. Hola. Muy bueno. Lo ensayé con archivos de 40 megas y trabaja perfecto. Estoy probándolo con uno de 314 megas y tengo definido los valores del php.ini según esos megas , cree el ,htacces y le puse en el propio php las variables según lo que necesito (máximos). Pero al cargarlo, la barra inicia correctamente y más o menos en la mitad se reinicia. después de llegar de nuevo a la mitad sale el mensaje NO SE PUEDE SUBIR. Lo raro es que la versión local usando WAMP funciona perfectamente. Me podrías ayudar? Gracias!

    Comments are closed.