Vengo a aportar y a pedir un poco de ayuda a los que saben ojalá y puedan echarme la mano.
Me he visto en la necesidad de incorporar en una pagina un formulario para subir multiples archivos de imagenes. La peculiaridad es que los campos de archivo aumentan segun lo requieras (haciendo clik en Agregar otro Archivo sin tener que recargar la pagina o subir uno por uno de los archivos. Ahora eh logrado hacer que suban los ficheros pero me gustaría mucho que me ayudaran. Les pongo el codigo del html que contiene el formulario.
Código:
<HTML>
<HEAD>
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt) ? event : evt;
}
// esta funcion crea dinamicamente los nuevos campos file
addCampo = function () {
//Creamos un nuevo div para que contenga el nuevo campo
nDiv = document.createElement('div');
//con esto se establece la clase de la div
nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
a.name = nDiv.id;
//Este link no debe ir a ningun lado
a.href = '#';
//Establecemos que dispare esta funcion en click
a.onclick = elimCamp;
//Con esto ponemos el texto del link
a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,//primero usamos la función appendChild para adicionar el campo file nuevo
nDiv.appendChild(nCampo);
//Adicionamos el Link
nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien//con esta función obtenemos una referencia a ella para usar de nuevo appendChild//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
</script>
</HEAD>
<BODY>
<form name="formu" id="formu" action="upload.php" method="post" enctype="multipart/form-data">
<dl>
<dt><label>Archivos a Subir:</label></dt>
<!-- Esta div contendrá todos los campos file que creemos -->
<dd><div id="adjuntos">
<!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en [] como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos en el script -->
<input type="file" name="archivos[]" /><br />
</div></dd>
<dt><a href="#" onClick="addCampo()">Agregar otro archivo</a></dt>
<dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
</dl></form>
</BODY>
</HTML>
se ve asi:<HEAD>
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt) ? event : evt;
}
// esta funcion crea dinamicamente los nuevos campos file
addCampo = function () {
//Creamos un nuevo div para que contenga el nuevo campo
nDiv = document.createElement('div');
//con esto se establece la clase de la div
nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
a.name = nDiv.id;
//Este link no debe ir a ningun lado
a.href = '#';
//Establecemos que dispare esta funcion en click
a.onclick = elimCamp;
//Con esto ponemos el texto del link
a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,//primero usamos la función appendChild para adicionar el campo file nuevo
nDiv.appendChild(nCampo);
//Adicionamos el Link
nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien//con esta función obtenemos una referencia a ella para usar de nuevo appendChild//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
</script>
</HEAD>
<BODY>
<form name="formu" id="formu" action="upload.php" method="post" enctype="multipart/form-data">
<dl>
<dt><label>Archivos a Subir:</label></dt>
<!-- Esta div contendrá todos los campos file que creemos -->
<dd><div id="adjuntos">
<!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en [] como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos en el script -->
<input type="file" name="archivos[]" /><br />
</div></dd>
<dt><a href="#" onClick="addCampo()">Agregar otro archivo</a></dt>
<dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
</dl></form>
</BODY>
</HTML>
Ahora el archivo upload.php que valga la redudancia es el que se encarga de gestion de la subidas y con el que quiero que me echen la mano:
Código:
<?php
//Preguntamos si nuetro arreglo 'archivos' fue definido
if (isset ($_FILES["archivos"])) {
//de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo
//obtenemos la cantidad de elementos que tiene el arreglo archivos
$tot = count($_FILES["archivos"]["name"]);
//este for recorre el arreglo
for ($i = 0; $i < $tot; $i++){
//con el indice $i, poemos obtener la propiedad que desemos de cada archivo
//para trabajar con este
$tmp_name = $_FILES["archivos"]["tmp_name"][$i];
$name = $_FILES["archivos"]["name"][$i];
$newfile = "imagenes/".$name;
if (is_uploaded_file($tmp_name)) {
if (!copy($tmp_name,"$newfile")) {
print "Error en transferencia de archivo.";
exit();
} // if copy
} // if is_up...
echo("<b>Archivo </b> $key ");
echo("<br />");
echo("<b>el nombre original:</b> ");
echo($name);
echo("<br />");
echo("<b>el nombre temporal:</b> \n");
echo($tmp_name);
echo("<br />");
}
}
?>
HASTA aqui los codigos funcionan como deben.//Preguntamos si nuetro arreglo 'archivos' fue definido
if (isset ($_FILES["archivos"])) {
//de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo
//obtenemos la cantidad de elementos que tiene el arreglo archivos
$tot = count($_FILES["archivos"]["name"]);
//este for recorre el arreglo
for ($i = 0; $i < $tot; $i++){
//con el indice $i, poemos obtener la propiedad que desemos de cada archivo
//para trabajar con este
$tmp_name = $_FILES["archivos"]["tmp_name"][$i];
$name = $_FILES["archivos"]["name"][$i];
$newfile = "imagenes/".$name;
if (is_uploaded_file($tmp_name)) {
if (!copy($tmp_name,"$newfile")) {
print "Error en transferencia de archivo.";
exit();
} // if copy
} // if is_up...
echo("<b>Archivo </b> $key ");
echo("<br />");
echo("<b>el nombre original:</b> ");
echo($name);
echo("<br />");
echo("<b>el nombre temporal:</b> \n");
echo($tmp_name);
echo("<br />");
}
}
?>
La cosa es que no he podido encontrar la forma de que los archivos que se suben no se sobreescriban si tienen el mismo nombre, tampoco hacer que sólo se permita cierto tipo de extensiones (particularmente imagenes).
Intente agregar esto para eso, pero el upload deja de funcionar.
Código:
$partes = explode('.',$_FILES['archivo']['name']) ;
$num = count($partes) - 1 ;
$extension = $partes[$num] ;
if($_FILES['archivo']['size'] <= 524288 && !file_exists('imagenes/'.$_FILES['archivo']['name']) && $extension == 'jpg' || $extension == 'JPG')
{code], esto lo puse enseguida de [code]if (isset ($_FILES["archivos"])) {
Pero como dije no funciona.$num = count($partes) - 1 ;
$extension = $partes[$num] ;
if($_FILES['archivo']['size'] <= 524288 && !file_exists('imagenes/'.$_FILES['archivo']['name']) && $extension == 'jpg' || $extension == 'JPG')
{code], esto lo puse enseguida de [code]if (isset ($_FILES["archivos"])) {
NO sé Casi mucho o casi nada de php pero ojala y no sea un impedimento para que me ayuden.
1.- Lo que le falta al archivo "upload.php es que no sobreescriba los ficheros, lo mejor es que se aborte la subida. El nombre de los archivos no deben cambiar. Deben mantener su nombre origiinal.
2.- Restringir la subida de archivos a un par de tipos, jpg, gif.
y 3.- Limitar el peso de los ficheros
Oajalá y a alguien le sirva estos codigos y también a los que saben me puedan ayudar con esos probemillas que tengo.
[/code]