wenas necesito algo de ayuda, estoy diseñando un pequeño sitio donde es necesario subir una imagen, pero necesito que el usuario pueda tener una vista previa de la imagen antes de subirla. El codigo que tengo es este :
<html>
<HEAD>
<script type="text/javascript">
var maxWidth=100;
var maxHeight=100;
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var outImage="previewField";
var defaultPic="spacer.gif";
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("Tipo de archivo no valido\npor favor elija imagenes con uno de los siguiente formatos:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->
</script>
</HEAD>
<BODY>
<div align="center" style="line-height: 1.9em;">
Test it by locating a valid file on your hard drive:
<br>
<input type="file" id="picField" onchange="preview(this)">
<br>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
</BODY>
</html>La cuestion es que por razones de seguridad javascript no tiene acceso a los archivos del cliente y cuando ya ejecuto este codigo desde localhost no funciona... Solo he encontrado un codigo funcional en la siguiente pagina
http://www.caricatos.net/articulos/prever.php pero mi intencion no es solo copiarlo, sino comprenderlo, si alguien me puede hechar la mano con algun otro ejemplo funcional o explicando el codigo de caricatos le agradecere mucho.
PD: De aqui se descarga el ejemplo de caricatos
http://www.caricatos.net/articulos/check_form.zip.
