Foros del Web » Programando para Internet » Javascript » Frameworks JS »

vista previa de imagenes antes del upload

Estas en el tema de vista previa de imagenes antes del upload en el foro de Frameworks JS en Foros del Web. Tratando de generar un preview de imagenes antes de ser subidas, encontré este código que funciona perfecto. Pero solo me deja subir 1 imagen. Al ...
  #1 (permalink)  
Antiguo 31/01/2014, 13:04
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 4 años, 10 meses
Puntos: 1
vista previa de imagenes antes del upload

Tratando de generar un preview de imagenes antes de ser subidas, encontré este código que funciona perfecto.
Pero solo me deja subir 1 imagen.
Al crear un nuevo <input file> y probarlo en el localhost no me genera el preview.

Necesito hacer 4 botones

¿Como puedo hacerlo?

Ayuda, manejo solo PHP.


Código:
//este es el script JS que genera el preview.

<script>
function ShowImagePreview( files )
{
    if( !( window.File && window.FileReader && window.FileList && window.Blob ) )
    {
      alert('The File APIs are not fully supported in this browser.');
      return false;
    }

    if( typeof FileReader === "undefined" )
    {
        alert( "Filereader undefined!" );
        return false;
    }

    var file = files[0];

    if( !( /image/i ).test( file.type ) )
    {
        alert( "File is not an image." );
        return false;
    }

    reader = new FileReader();
    reader.onload = function(event) 
            { var img = new Image; 
              img.onload = UpdatePreviewCanvas; 
              img.src = event.target.result;  }
    reader.readAsDataURL( file );
}

function UpdatePreviewCanvas()
{
    var img = this;
    var canvas = document.getElementById( 'previewcanvas' );

    if( typeof canvas === "undefined" 
        || typeof canvas.getContext === "undefined" )
        return;

    var context = canvas.getContext( '2d' );

    var world = new Object();
    world.width = canvas.offsetWidth;
    world.height = canvas.offsetHeight;

    canvas.width = world.width;
    canvas.height = world.height;

    if( typeof img === "undefined" )
        return;

    var WidthDif = img.width - world.width;
    var HeightDif = img.height - world.height;

    var Scale = 0.0;
    if( WidthDif > HeightDif )
    {
        Scale = world.width / img.width;
    }
    else
    {
        Scale = world.height / img.height;
    }
    if( Scale > 1 )
        Scale = 1;

    var UseWidth = Math.floor( img.width * Scale );
    var UseHeight = Math.floor( img.height * Scale );

    var x = Math.floor( ( world.width - UseWidth ) / 2 );
    var y = Math.floor( ( world.height - UseHeight ) / 2 );

    context.drawImage( img, x, y, UseWidth, UseHeight );  
}
</script>


//este div muestra el preview de la imagen

<div id="previewcanvascontainer">
<canvas id="previewcanvas">
</canvas>
</div>

//Este form contiene el <input File> y lleva la accion a otra pagina php.

<form action="/uploadfile.php" enctype="multipart/form-data" method="post">
   <input type="file" id="foto1" onchange="return ShowImagePreview( this.files );" />
  
</form>
  #2 (permalink)  
Antiguo 31/01/2014, 17:01
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 4 años, 10 meses
Puntos: 1
Respuesta: vista previa de imagenes antes del upload

Como ven funciona perfecto pero solo me deja subir una foto y necesito 4 , si alguien ne puede ayudar gracias!!
  #3 (permalink)  
Antiguo 27/04/2014, 21:44
Avatar de zetahosting  
Fecha de Ingreso: octubre-2011
Mensajes: 119
Antigüedad: 7 años, 2 meses
Puntos: 2
Respuesta: vista previa de imagenes antes del upload

Ponele en el input multiple=""
__________________
Excelente WebHosting -> www.zetahosting.net
[email protected]
Twitter: @zetahosting
  #4 (permalink)  
Antiguo 11/11/2014, 10:24
 
Fecha de Ingreso: noviembre-2014
Mensajes: 1
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: vista previa de imagenes antes del upload

Buenas amigo estoy usando el script y funciona muy bien pero me gustaria poder mostrar primero la imagen que ya tengo guardada y luego que ellos si quieren la modifiquen me podrias ayudar en eso y que el tamaño de la etiqueta sea mas pequeño

Etiquetas: funcion, html, imagenes, input, javascript, js, php, previa, upload, vista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:13.