Perú

Lima,Perú

Previsualizar imagen con Html5 y Javascript

Fecha Publicación:       21 de Febrero de 2020
Fecha Modificación:       21 de Febrero de 2020

Con HTML5 y Javascript vamos a previsualizar la imagen que seleccionamos desde un campo “File“, todo esto es posible gracias a la API de archivos de HTML5.

CSS:

.thumb{
     height: 300px;
     border: 1px solid #000;
     margin: 10px 5px 0 0;
}

HTML:

<label>Foto :</label>
<input type="file" id="files" name="files[]" onBlur='LimitAttach(this,1)' accept="image/*";/>
<br/>
<div style="width:250; height:auto; margin:0 auto">
	<output id="list"></output>                
</div>  

Javascript

<script type="text/javascript">
	function archivo(evt) {
      var files = evt.target.files; // FileList object
       
        //Obtenemos la imagen del campo "file". 
      for (var i = 0, f; f = files[i]; i++) {         
           //Solo admitimos imágenes.
           if (!f.type.match('image.*')) {
                continue;
           }
       
           var reader = new FileReader();
           
           reader.onload = (function(theFile) {
               return function(e) {
               // Creamos la imagen.
              document.getElementById("list").innerHTML = 
['<img class="thumb" src="', e.target.result,'" title="',
 escape(theFile.name), '"  width="250" height="200" />'].join('');
               };
           })(f);
 
           reader.readAsDataURL(f);
       }
}
             
      document.getElementById('files').addEventListener('change', archivo, false);
</script>

validar que se seleccionen solo archivos de determinado tipo en un INPUT TYPE='FILE'

<!--P:Como validar que se seleccionen solo archivos de determinado tipo en un INPUT TYPE='FILE'?
de tal forma que en tu input type='file' agreges
onBlur='LimitAttach(this,n);' donde n es el tipo de validacion que deseas hacer

Nota. Los tipos de validaciones mostrados son
1: gif, jpg, png
2: swf
3: exe, sit, zip, tar, swf, mov, hqx, ra, wmf, mp3, qt, med, et
4: mov, ra, wmf, mp3, qt, med, et, wav
5: htm, html, shtml
6: doc, xls, ppt
pero pueden agregarse o cambiarse segun se necesiten
 -->
<script type="text/javascript">
function LimitAttach(tField,iType) { 
file=tField.value; 
if (iType==1) { 
extArray = new Array(".gif",".jpg",".png",".jpeg",".bmp"); 
} 
if (iType==2) { 
extArray = new Array(".swf"); 
} 
if (iType==3) { 
extArray = new Array(".exe",".sit",".zip",".tar",".swf",".mov",".hqx",".ra",".wmf",".mp3",
".qt",".med",".et"); 
} 
if (iType==4) { 
extArray = new Array(".mov",".ra",".wmf",".mp3",".qt",".med",".et",".wav"); 
} 
if (iType==5) { 
extArray = new Array(".html",".htm",".shtml"); 
} 
if (iType==6) { 
extArray = new Array(".doc",".xls",".ppt"); 
} 
allowSubmit = false; 
if (!file) return; 
while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1); 
ext = file.slice(file.indexOf(".")).toLowerCase(); 
for (var i = 0; i < extArray.length; i++) { 
if (extArray[i] == ext) { 
allowSubmit = true; 
break; 
} 
} 
if (allowSubmit) { 
} else { 
tField.value=""; 
 document.getElementById("list").innerHTML = ['<img src="" />'];
alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + 
"\nPor favor seleccione un nuevo archivo"); 
} 
}  
</script>

 

Codigo Completo

<html>
      <head>
            <style>
          .thumb {
            height: 300px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
          }
        </style>
    </head>
    <body>
     
 <label>Foto :</label>
	<input type="file" id="files" name="files[]" onBlur='LimitAttach(this,1)' accept="image/*";/>
	<br/>
<div style="width:250; height:auto; margin:0 auto">
    <output id="list"></output>                
</div>  

         
        <script>
              function archivo(evt) {
                  var files = evt.target.files; // FileList object
             
                  // Obtenemos la imagen del campo "file".
                  for (var i = 0, f; f = files[i]; i++) {
                    //Solo admitimos imágenes.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
             
                    var reader = new FileReader();
             
                    reader.onload = (function(theFile) {
                        return function(e) {
                          // Insertamos la imagen
                         document.getElementById("list").innerHTML =
 ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                        };
                    })(f);
             
                    reader.readAsDataURL(f);
                  }
              }
             
              document.getElementById('files').addEventListener('change', archivo, false);
      </script>

		<!-- Fin previsualizar imagen -->

<!--P:Como validar que se seleccionen solo archivos de determinado tipo en un INPUT TYPE='FILE'?
de tal forma que en tu input type='file' agreges
onBlur='LimitAttach(this,n);' donde n es el tipo de validacion que deseas hacer

Nota. Los tipos de validaciones mostrados son
1: gif, jpg, png
2: swf
3: exe, sit, zip, tar, swf, mov, hqx, ra, wmf, mp3, qt, med, et
4: mov, ra, wmf, mp3, qt, med, et, wav
5: htm, html, shtml
6: doc, xls, ppt
pero pueden agregarse o cambiarse segun se necesiten
 -->
<script type="text/javascript">
function LimitAttach(tField,iType) { 
file=tField.value; 
if (iType==1) { 
extArray = new Array(".gif",".jpg",".png",".jpeg",".bmp"); 
} 
if (iType==2) { 
extArray = new Array(".swf"); 
} 
if (iType==3) { 
extArray = new Array(".exe",".sit",".zip",".tar",".swf",".mov",".hqx",".ra",".wmf",".mp3",".qt",".med",".et"); 
} 
if (iType==4) { 
extArray = new Array(".mov",".ra",".wmf",".mp3",".qt",".med",".et",".wav"); 
} 
if (iType==5) { 
extArray = new Array(".html",".htm",".shtml"); 
} 
if (iType==6) { 
extArray = new Array(".doc",".xls",".ppt"); 
} 
allowSubmit = false; 
if (!file) return; 
while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1); 
ext = file.slice(file.indexOf(".")).toLowerCase(); 
for (var i = 0; i < extArray.length; i++) { 
if (extArray[i] == ext) { 
allowSubmit = true; 
break; 
} 
} 
if (allowSubmit) { 
} else { 
tField.value=""; 
 document.getElementById("list").innerHTML = ['<img src="" />'];
alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo"); 
} 
}  
</script>


    </body>
</html>

 

Leidas : 286 Veces
Compartir: