<!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"> <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
});
}
});
});
<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
ñadir otra imagen
</a></div> <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 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;
}