Usando uplodify para multiarchivo casi esta

franjgg · #1 (**permalink**) 17/01/2013, 16:09

Hola amigos como estais,

Vereis estoy usando uplodify que es un script para subir archivos y demas la cosa es que he modificado para añadir un campo textarea a cada imagen, la cosa es que al añadir otro campo text me guarda todas las descripciones como la primera osea iguales, creo quepuede estar en que al seleccionar las imagenes selecciono varias a la vez y los campos text tengo que añadirlos con un scritp al pulsar un bonton manualmente.

el codigo es este:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple files upload in PHP with using Uploadify!</title>
 
<!-- CSS -->
<link rel="stylesheet" href="uploadifyit/uploadify.css" type="text/css" />
 
<!-- Javascript -->
<script type="text/javascript" src="uploadifyit/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="uploadifyit/swfobject.js"></script>
<script type="text/javascript" src="uploadifyit/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
    
    //alert('I am ready to use uploadify!');
    $("#file_upload").uploadify({
        'uploader': 'uploadifyit/uploadify.swf',
        'script': 'uploadifyit/uploadify.php',
        'cancelImg': 'uploadifyit/cancel.png',
        'folder': 'uploads',
        'auto': false, // use for auto upload
        'multi': true,
        'queueSizeLimit': 4,
        'onQueueFull': function(event, queueSizeLimit) {
            alert("Please don't put anymore files in me! You can upload " + queueSizeLimit + " files at once");
            return false;
        },
        'onComplete': function(event, ID, fileObj, response, data) {
            // you can use here jQuery AJAX method to send info at server-side.
            /*$.post("insert.php", { name: fileObj.name }, function(info) {
                alert(info); // alert UPLOADED FILE NAME
            });*/
            
            $.post("insert.php",{name: fileObj.name, description: $("#description").val()}, function(info) {
 
            alert(info); // alert UPLOADED FILE NAME
 
    });         
            
            
        }
    });
 
 
    
});
 
</script>
</head>
 
<body>
<span style="font-color:#666666; font-size:10pt; font-weight:bold;">Subir imagenes:</span><div style="float:right;"><a href="#" onClick="addCampo()" class="Estilo_Boton">A&ntilde;adir otra imagen</a></div>
<form id="form1" name="form1" action="">
<div id="adjuntos" >
<input type="file" id="file_upload" name="file_upload" /><br />
File title: <br />
File Description:<br />
<textarea cols="30" rows="4" id="description" name="description[]"></textarea><br />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload File</a>
</div>
</form> 
<!--
<form id="form1" name="form1" action="">
<input type="file" id="file_upload" name="file_upload" /><br />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload File</a>
</form>
-->
 
 
<script type="text/javascript">
 
   var numero = 0; //Esta es una variable de control para mantener nombres
   var numerotext = 0;
 
            //diferentes de cada campo creado dinamicamente.
   evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
   return (!evt) ? event : evt;
}
 
//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
   addCampo = function () { 
     
//Creamos un nuevo div para que contenga el nuevo campo
   nDiv = document.createElement('div');
     
     //nDivtext = document.createElement('divtext');
//con esto se establece la clase de la div
   nDiv.className = 'Div_Archivo_galerias';
     
  // nDivtext.className = 'archivotext';     
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
   nDiv.id = 'file' + (++numero);
     
  // nDivtext.id = 'filetext' + (++numerotext);  
//creamos el input para el formulario:
//   nCampotext = document.createElement('input');
//   nCampotext.className = 'Inputs_class_galerias';
   nCampo = document.createElement('textarea');
   nCampo.className = '';
     
//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
 //  nCampotext.name = 'title[]';
   nCampo.name = 'description[]';
     
//Establecemos el tipo de campo
 //  nCampotext.type = 'text';   
   nCampo.type = 'textarea';     
     
//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.className = 'Texto_galerias_eliminar';   
   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(nCampotext);     
   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');
   containertext = document.getElementById('adjuntos');  
   container.appendChild(nDiv);
     container.appendChild(nDivtext);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
 
     elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
     nCampotext = rObj(evt);
   div = document.getElementById(nCampo.name);
   divtext = document.getElementById(nCampotext.name);   
   div.parentNode.removeChild(div);
   divtext.parentNode.removeChild(divtext);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
 
   rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}
</script>
</body>
</html>

A ver si alguien puede orientarme un poquito de como se podria hacer, la idea es que al pulsar el link de añadir otra se añada otra otro boton para añadir otra imagen y su textarea correspondiente.

Bueno amigos un saludo y mil gracias