Question:

Date: 08-01-2016 13:38:38 (In Spanish)

¿Cómo subir múltiples imágenes?[Resolved]

tengo una duda estoy trabajando con angularjs quiero subir 3 imágenes y mover las a una carpeta
pero solo consigo subir leer la ruta de una sola imagen
tengo el siguiente script


 app.directive('fileModel', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function(){
                    scope.$apply(function(){
                        modelSetter(scope, element[0].files);
                    });
                });
            }
        };
    }]);
app.controller('imgs',function($scope){
   $scope.final = function(data)
        {

          
          var file = $scope.imagen;
          console.log(file.name);
        }
});

alguna idea de como puedo hacer para subir las múltiples imágenes ??? Tags: AngularJS - Javascript - Question - Upload Files Votes: 2 - Answers: 4 - Views: 18 Share on: Google Facebook Twitter LinkedIn Link

Answers:

2

Fernando Mosquera Karma: 10200
Date: 08-01-2016 17:30:06
Hola Andy, seguramente con AngularJS tienes alguna forma de resolverlo (la verdad, desconozco), lo que si te puedo decir es que lo puedes resolver muy facilmente con HTML5 y PHP, veamos un ejemplo que siempre es más claro.

Deberemos crear la siguiente estructura:
index.php <-- página web HTML5 con un formulario para hacer el upload de las imágenes
procesar.php <-- script PHP que se encargará de tratar las imágenes subidas
upload <-- carpeta destino de las imágenes

index.php
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="procesar.php" method="post" enctype="multipart/form-data">
            Selecciona las images: <input type="file" name="img[]" multiple="multiple"><br/>
            <input type="submit" value="subir archivos">
        </form> 
    </body>
</html>
```
Comentarios de la página index.php: observar que en el formulario utilice el atributo "multiple" en el campo input type file, con una sintaxis XHTML y el atributo "name" de este campo debe tener corchetes, requerido para que sea correctamente recibido en PHP como array multiple, muy distinto a lo ejemplificado en la documentación oficial de la W3C.

procesar.php
```
<?php
$pathUpload = 'upload'.DIRECTORY_SEPARATOR;

for ($index = 0; $index < count($_FILES['img']['tmp_name']); $index++) {
    move_uploaded_file($_FILES['img']['tmp_name'][$index], $pathUpload.$_FILES['img']['name'][$index]);
}

echo '<pre>';
print_r($_FILES); //<-- veamos que hay en el array
```
Comentarios del script procesar.php: este script trata las imágenes enviadas por medio del array superglobal PHP $_FILES[]. Observar que el array múltiple no está dado al nivel de la clave "img", sino por cada subclave de esta (veamoslo en el siguiente ejemplo).

Ejemplo del contenido del array superglobal PHP $_FILES[] al momento de subir 3 imagenes:
```
Array
(
    [img] => Array
        (
            [name] => Array
                (
                    [0] => casino.jpg
                    [1] => chucknorris.jpg
                    [2] => compartir.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                    [2] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => C:\xampp5_6_15\tmp\phpEE9A.tmp
                    [1] => C:\xampp5_6_15\tmp\phpEE9B.tmp
                    [2] => C:\xampp5_6_15\tmp\phpEEAB.tmp
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 49927
                    [1] => 5755
                    [2] => 189764
                )

        )

)
```
Observaciones: este es un ejemplo de como se podrían capturar los archivos y moverlos a un destino X, para que el código pueda ser considerado para su utilización en producción deberán realizarse las validaciones pertinentes (si el array esta vacío o no, si las imágenes enviadas son validas en tamaño, tipo, etc). Espero que se entienda que el ejemplo es funcional para ejemplificar el upload múltiple y no mucho más. Tampoco pretendo que un recien iniciado comprenda 100% mi explicación, ya que asumo un conocimiento previo (si eres un novel, te recomiendo que comiences por ver como se sube un solo archivo y como debe ser correctamente validado dicho upload, tanto del lado del cliente como en el servidor).

Espero que mi respuesta te sea de ayuda.

Saludos,
Votes: 2 - Link answer

Fernando Mosquera Karma: 10200

Date: 08-01-2016 18:09:25 Como complemento a mi explicación, aquí tienes un excelente tutorial de Porfirio Chávez
http://elporfirio.com/wp/2013/07/subir-varios-archivos-con-php-multifile-upload/

El método explicado por Porfirio es distinto al que explique yo anteriormente, ya que no se utilizar el atributo "multiple", sino múltiples campos input.

Transcribo algunos scripts interesantes con mis anotaciones del caso.

El siguiente script responde a la pregunta ¿Cómo saber cuál es el tamaño máximo de archivo permitido?, es interesante de ver como toma el valor mínimo de las tres configuraciones consultadas, muy astuto utilizando la función min().

<?php
$max_upload = (int) (ini_get('upload_max_filesize'));
$max_post = (int) (ini_get('post_max_size'));
$memory_limit = (int) (ini_get('memory_limit'));
$upload_mb = min($max_upload, $max_post, $memory_limit);

echo "Tamaño maximo permitido <strong>$upload_mb Mb</strong><br>";
?>

La siguiente función tiene un resumen/explicación de los distintos mensajes de error ante un upload

function mensajesErrorArchivos($error_code) { //Mensajes Personalizados
    switch ($error_code) {
        case UPLOAD_ERR_INI_SIZE:
            return 'El archivo excede el limite permitido por la directiva de PHP';
        case UPLOAD_ERR_FORM_SIZE:
            return 'El archivo excede el limite permitido por la directiva de HTML';
        case UPLOAD_ERR_PARTIAL:
            return 'El archivo solo se subio parcialmente, intentelo de nuevo';
        case UPLOAD_ERR_NO_FILE:
            return 'No hay archivo que subir';
        case UPLOAD_ERR_NO_TMP_DIR:
            return 'El folder temporal no existe';
        case UPLOAD_ERR_CANT_WRITE:
            return 'No tiene permisos para grabar archivos en el disco';
        case UPLOAD_ERR_EXTENSION:
            return 'El archivo tiene una extensión NO permitida';
        default:
            return 'Error desconocido al subir el archivo';
    }
}

También recomiendo que vean la documentación oficial de PHP: Explicación de los mensajes de error

Saludos! Votes: 1 - Link answer

0

Andy Martinez Karma: 315

Date: 15-01-2016 09:21:20 gracias Votes: 0 - Link answer
1

Porfirio Chávez Karma: 433

Date: 15-01-2016 11:22:25 Hola, vas a subir imágenes de forma normal o con AJAX ? ya que de aquí depende si es sencillo o muy complicado.

Una forma de solventarlo es con una directiva ng-file-upload :)

https://github.com/danialfarid/ng-file-upload

Saludos. Votes: 1 - Link answer

To actively participate in the community first must authenticate, enter the system.Sign In

frjcbbae garagebible.com

Question:

¿Cómo subir múltiples imágenes?[Resolved]

Answers:

sections

The community

My Account