P: ¿Como puedo adjuntar varios ficheros dinámicamente?
R: Seguro que ya habrá algún mensaje para añadir campos dinámicamente, pero en ocasiones son de difícil validación por el atributo name de los mismos (en explorer no conozco modo de referenciar por ese atributo los campos creados dinámicamente)
El tema se desarrolló en el mensaje:
añadir name="userfile[]" a script de http://the-stickman.com/ de upload multiple file, y el código final sería:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<script>
function tag(id) {return document.getElementById(id)};
var actual = total = 0;
var maximo = 5;
function listar(f) {
if (actual == total) {
actual = ++total;
nuevo = document.createElement("div");
nuevo.onclick = function() {
tag("file_" + actual).style.display = "none";
tag("elemento_" + actual).style.backgroundColor = "white";
actual = this.id.substr(9);
tag("file_" + actual).style.display = "inline";
tag("elemento_" + actual).style.backgroundColor = "#eeeeee";
}
nuevo.id = "elemento_" + (actual - 1);
tag("listado").appendChild(nuevo);
nuevo.appendChild(document.createTextNode(f.value));
nuevo.style.cursor = "pointer";
if (total < maximo) {
nuevof = f.cloneNode(true);
f.style.display = "none";
nuevof['value'] = "";
nuevof.id = "file_" + actual;
f.parentNode.insertBefore(nuevof, f.nextSibling);
}
else {
tag("oculto").style.display = "none";
actual = 4;
tag("elemento_" + actual).style.backgroundColor = "#eeeeee";
}
}
else {
elem = tag("elemento_" + actual);
elem.replaceChild(document.createTextNode(f.value), elem.firstChild);
//tag("elemento_" + actual).innerHTML = f.value;
}
}
</script>
</head>
<body>
<form action="javascript: alert('Ok')" >
<input type="file" onchange="listar(this)" name="userfile[]" id="file_0" size="50" />
<button type="submit"> enviar </button>
</form>
<div id="listado" style="position: relative; background-color: white">
<div id="oculto" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent">
</div>
</div>
</body>
</html>
Se ha añadido un sistema de selección mejorado (con resalte y cursor "pointer")
Saludos
