vista previa de imagenes antes del upload

[pitbullmedel]

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>

[pitbullmedel]

Como ven funciona perfecto pero solo me deja subir una foto y necesito 4 , si alguien ne puede ayudar gracias!!

[zetahosting]

Ponele en el input multiple=""

[jossmiht]

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