Cancelar multiples input file. Ayuda por favor

mtpllamas · #1 (**permalink**) 15/03/2011, 09:47

Muy buenas, acabo de registrarme porque por más que he buscado por internet no he conseguido dar con la razón por la que no me funciona lo que tengo hecho. No me ha quedado más remedio que molestaros un poquito, lo siento de antemano.

Bueno os expongo un poco la idea. tengo un html básico que luego adaptaré en mi código pero una vez que funcione. Ahora mismo la idea es hacer un multiple input file, es decir yo voy dando la opción de seleccionar archivos para posteriormente subirlos a un servidor, pero siempre puede existir la equivocación e intentar subir un fichero erróneo, para ello quiero dar la opción de cancelar ese input, es decir, eliminarlo directamente. El código es el siguiente, sé que está un poco lioso pero...le he dado mil vueltas por arriba y por abajo y no hay forma.

<HTML>

<BODY BGCOLOR = "#FFFFFF" TEXT = "000000" OnKeyPress="return desactivarTeclaEnter(event)">
<form action="/cgi-bin/d.html" method="post" enctype="multipart/form-data">
<script type="text/javascript">
var upload_number = 1;
function addFileInput() {
var d = document.createElement("div");
var e = document.createElement("div");
var file = document.createElement("input");
var cancel = document.createElement("input");

cancel.setAttribute("type", "button");
cancel.setAttribute("name", "cancelar"+upload_number);
cancel.setAttribute("value", "Eliminar"+upload_number);
cancel.setAttribute("size",40);

file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
file.setAttribute("id", "attachment"+upload_number);
file.setAttribute("size",40);

var gko = navigator.userAgent.toLowerCase();

if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
cancel.setAttribute('onclick','this.parentNode.rem oveChild(this);return false');//hacemos el setAttribute normalmente
else //es I Explroer
//cancel['onclick']=new Function('this.parentNode.removeChild(this);return false;');//creamos en setAttribute de esta forma
cancel['onclick']=new Function('borrar(this);');//creamos en setAttribute de esta forma

d.appendChild(file);
e.appendChild(cancel);

document.getElementById("moreUploads").appendChild (d);
document.getElementById("cancelUploads").appendChi ld(e);
upload_number++;
}

function borrar(objeto){
var number = objeto.name;

number = number.substring(8);

var cadena = "attachment"+number;
alert(cadena);
var objeto2 = document.getElementsByTagName(cadena);
alert(objeto2.name);
moreUploads.removeChild(cadena);
// moreUploads.removeChild(objeto2);
// var salya = document.getElementbyId("attachment2");
// alert(salya.length);
//moreUploads.removeChild(moreUploads.lastChild);
objeto.parentNode.removeChild(objeto);
}

</script>

<table width = 100% border=0 align = "center">
<TR>
<TD width = 25% style="color:black;">
Adjuntar fichero:
</TD>
<TD>
<input type="file" size = 40 name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink ').style.display = 'block';" />
<TABLE>
<TR>
<TD>
<div id="moreUploads">
</div></TD>
<TD><div id="cancelUploads">
</div></TD>
</TR>
</TABLE>

<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Añadir otro adjunto</a></div>

</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>

Es necesario que funcione en Internet Explorer, en Firefox me da igual porque se va a utilizar únicamente con el Explorer, ahora mismo me da error en la línea 51 diciéndome "Tipo incorrecto".

var objeto2 = document.getElementsByTagName(cadena);
alert(objeto2.name);
moreUploads.removeChild(cadena);

Muchas gracias por todo.

Un saludo.

mtpllamas · #2 (**permalink**) 15/03/2011, 12:20

Ya está!! Lo he conseguido, por si le puede servir a alguien, solamente he cambiado la parte de la función borrar y la he dejado así. Tengo que limpiarla un poco pero bueno, esto le puede servir a quien le haga falta.

function borrar(objeto){
var number = objeto.name;

number = number.substring(8);

var cadena = "attachment"+number;
alert(cadena);
var objeto2 = document.getElementById(cadena);
alert(objeto2.value);
objeto2.parentNode.removeChild(objeto2);
// moreUploads.parentNode.removeChild(objeto2);
// var salya = document.getElementbyId("attachment2");
// alert(salya.length);
//moreUploads.removeChild(moreUploads.lastChild);
objeto.parentNode.removeChild(objeto);
}

Un saludo.

marcopoloaz06 · #3 (**permalink**) 15/03/2011, 12:43

Hola, veo tienes algunos errores:

La estructura basica del HTML.
Tienes que seguir la estructra estandar, me refiero a:

Código:

html
head
title /title
script /script
/head
body
form /form
/body
 /html

Tiendes a usar muchos divs para todo, yo tambn un tiempo hacia eso :s

Puedes usar onload, cuando la pagina esta cargada, es donde se cargan los eventos,
es para evitar eso de:

Código:

<input onchange="document.getElementById('moreUploadsLink ').style.display = 'block';" />

Código Javascript:

Ver originalonload = function() {
    document.getElementById('attachment').onchange = function() {
        document.getElementById('moreUploadsLink').style.display = 'block';
    }
}

Y si creas mas de 9 te va mandar error, porque solo es un simple number.substring(8), para evitar eso usa:

Código Javascript:

Ver originalvar number = objeto.name.match(/\d+$/)[0];

Que extrae el número del nombre.

Puedes hacer muchos cambios para que quede mejor, pero solo es un ejemplo

Saludos
:]

mtpllamas · #4 (**permalink**) 16/03/2011, 01:09

Muchísimas gracias por tu respuesta, seguiré todos tus consejos, ya comenté que el código era muy mejorable pero estoy empezando y ahora...con funcionar me doy por satisfecha jeje, luego ya iré puliendo.

Muchas gracias, un saludo.