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>
Articulo : 1647 - Veces Leidas