Gracias por responder caricatos.
Voy a pegar el código.
El formulario de subida:
Código HTML:
<div>
<table width="346" bordercolor="#000000" bgcolor="#ffffff">
<form id="uploadform" action="process_upload.php" method="post" enctype="multipart/form-data" target="uploadframe">
<tr>
<td colspan="3" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="center">Fotos</div></td>
</tr>
<tr>
<td width="98" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto portada: </div></td>
<td width="231" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img0" name="trab_img0"/></td>
<td width="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="98" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto video: </div></td>
<td width="231" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img11" name="trab_img11"/></td>
<td width="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 1:</div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img1" name="trab_img1"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 2: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img2" name="trab_img2"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 3: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img3" name="trab_img3"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 4: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img4" name="trab_img4"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 5: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img5" name="trab_img5"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 6: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img6" name="trab_img6"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 7: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img7" name="trab_img7"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 8: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img8" name="trab_img8"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 9: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img9" name="trab_img9"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 10: </div></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img10" name="trab_img10"/></td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th colspan="3" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><input type="submit" value="Subir" onClick="uploadimg(document.getElementById('uploadform')); return false;" />
<iframe id="uploadframe" name="uploadframe" src="process_upload.php" style="display:none"></iframe></th>
</tr>
</form>
</table>
<div id="imagenes" style="width:300px float:right">
<div id="estado"></div>
<table width="346" bordercolor="#000000" bgcolor="#ffffff" border="1">
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg0" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg1" style="float:right"></div></td></tr>
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg2" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg3" style="float:right"></div></td></tr>
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg4" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg5" style="float:right"></div></td></tr>
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg6" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg7" style="float:right"></div></td></tr>
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg8" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg9" style="float:right"></div></td></tr>
<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg10" style="float:left"></div></th>
<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg11" style="float:right"></div></td></tr>
</table>
</div>
</div> El javscript:
//xmlhttp.js
//Función para crear un objeto XMLHttp
Código:
function getxmlhttp(){
//Crear una variable de Bool para comprobar si se puede utilizar una iinstancia
//ActiveX de Microsoft.
var xmlhttp = false;
//Comprobar si se está utilizando Internet Explorer.
try{
//Si la versión de javascript es superior a la 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//Si no, utilizar el objeto ActiveX tradicional.
try{
//Si se está utilizando Internet Explorer
xmlhttp = new ActiveXObject("Microsoft. XMLHTTP");
}catch(E){
//En caso contrario9 no de3be estarse utilizando Internet Explorer
xmlhttp = false;
}
}
//Si no se está utilizando Internet Explorer, crear una instancia Javascript
//del objeto.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//Función para procesar un XMLHttpRequest.
function processajax (obj, serverPage){
//Obtener el objeto XMLHttpRequest a utilizar.
var theimg;
xmlhttp = getxmlhttp();
xmlhttp.open("GET", serverPage,true);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(obj).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
Código:
// functions.js
function uploadimg(theform){
//Enviar el formulario.
theform.submit();
//Mostrar el mensaje de carga al usuario.
setStatus ("Loading...","estado");
}
//Función para determinar cuándo ha concluido la ejecución de process_upload.php.
function doneloading(theframe,thefile,thediv){
var theloc = "showimg.php?thefile=" + thefile
theframe.processajax ("showimg" + thediv,theloc);
showfield (theframe,thefile,thediv);
}
//Función para establecer el estado de carga.
function setStatus (theStatus, theObj){
obj = document.getElementById(theObj);
if(obj){
obj.innerHTML = "<div class=\"bold\">" + theStatus + "</div>";
}
}
function showfield(theframe,thefile,thediv){
var thefield = "showfield.php?thefile=" + thefile +"&thediv=" + thediv
theframe.processajax ("field" + thediv,thefield);
}
Y ahora pongo el proceso de subida y de muestra.