Hola Flaviovich,
Lo único que se me ocurre para resetear cada uno de los campos es utilizar una función jscript de Microsoft IE6 pero no funciona en Netscape y es la siguiente:
<script type="text/javascript">
function updatePreviewImage(num) {
file = document.getElementById('FILE'+num);
image = document['previewImage'+num];
image.src = 'file://' + file.value;
image.width = 100;
image.height = 75;
return true;
}
function resetPreviewImage(num) {
document.getElementById('FILE'+num).focus();
document.getElementById('FILE'+num).select();
document.execCommand("Delete");
document.getElementById('FILE'+num).blur();
var sImageSrc = '';
sImageSrc = 'images/f.gif';
document['previewImage'+num].src = sImageSrc;
document['previewImage'+num].width = 80;
document['previewImage'+num].height = 80;
}
</script>
y en el body lo siguiente:
<form action="upload.cgi" method="POST" name="fvalida" enctype="multipart/form-data">
<td class="even">Fotos:
<td class="odd" valign="top">
<input name="algo" type="hidden" value="238">
<b>Archivo de imágenes:</b><br /><br />
<ol>
<li>
<input name="FILE0" id="FILE0" type="file" onChange="updatePreviewImage(0);">
<input type="button" value="Borrar foto" onclick="resetPreviewImage(0);"></li>
<li>
<input name="FILE1" id="FILE1" type="file" onChange="updatePreviewImage(1);">
<input type="button" value="Borrar foto" onclick="resetPreviewImage(1);">
</li>
<li>
<input name="FILE2" id="FILE2" type="file" onChange="updatePreviewImage(2);">
<input type="button" value="Borrar foto" onclick="resetPreviewImage(2);">
</li>
<li>
<input name="FILE3" id="FILE3" type="file" onChange="updatePreviewImage(3);">
<input type="button" value="Borrar foto" onclick="resetPreviewImage(3);">
</li>
</ol>
<em></em>
</td>
<td valign="top" class="odd"><b>Imágenes previsualizadas:</b><br /><br /><div style="width:120px; height:90px; float:left; text-align:center;">
<em>Photo 1:</em><br /><img name="previewImage0" src="images/f.gif"></div><div style="width:120px; height:90px; float:left; text-align:center;">
<em>Photo 2:</em><br /><img name="previewImage1" src="images/f.gif"></div><div style="width:120px; height:90px; float:left; text-align:center;">
<em>Photo 3:</em><br /><img name="previewImage2" src="images/f.gif"></div><div style="width:120px; height:90px; float:left; text-align:center;">
<em>Photo 4:</em><br /><img name="previewImage3" src="images/f.gif"></div></td>
</tr><br><br>
<input type="submit" id="sub" value="Subir fotos" ><input type="reset" class="" value="Cancelar">
</form>
Pero hay un problemita con la funcion document.execCommand("Delete");
el cursor pasa nuevamente por los campos borrados innecesariamente.
Saludos