Hello, good morning, everyone I commented: I have to do an optimization of a gallery, in this case I have to manage 20 images dynamically, that is, the user decides how many photos he wants to upload, the fact is that I know how to upload one or two dynamically with a code, let's say not so dynamic. What I have is this
HTML
<form name="formulario_av_galeria_foto" method="post" enctype="multipart/form-data" action="pub_av_galerias_fotos_formulario_enviar.php">
<fieldset>
<input type="hidden" name="id_galeria" value="{$objeto_galeria.id}" />
<legend><i class="fa fa-pencil-square-o fa-fw"></i> Formulario de foto de galería ({$objeto_galeria.titulo_es})</legend>
<input type="hidden" name="id" value="{$objeto.id}" />
<div class="form-group" id="capa_fichero1">
<label for="fichero1">Foto</label>
<div>
<select class="form-control" name="num_fotos">
<option disabled="true" selected>Selecciona un valor</option>
{for $num=1 to 20}
<option>{$num}</option>
{/for}
</select>
</div>
<br/>
<div class="oculta" id="file_upload_1"><i class="fa fa-spinner fa-spin fa-fw"></i> Subiendo foto...</div>
<div id="capa_forms">
</div>
</div>
<button class="btn btn-info btn-block login" type="button" onclick="javascript:enviar_galeria_foto_formulario();">Enviar</button>
</fieldset>
</form>
JS on the same page HMTL I have this
<script type="text/javascript">
$('select[name=num_fotos]').change(function(){
// console.log($(this).val());
generar_forms_galeria($(this).val());
});
</script>
and in the JS file I have the following is something quite extensive
function generar_forms_galeria(valor){
$("#capa_forms").empty();
var random = $("input[name=random]").val();
// console.log(random);
// console.log(valor);
for (var i = 1; i <= valor; i++) {
// console.log(i);
$("#capa_forms").append(
$("<div/>", {"class":"form-group"}).append(
$("<label/>",{"for":"fichero"+i,"html":"FOTO"}),
$("<div/>",{"class":"input-append"}).append(
$("<input/>",{"id":"photoCover"+i,"class":"form-control", "type":"text","placeholder":"Haga clic para subir foto",
"onclick":"dar_valor_files("+i+")"
})
)
),
$("<div/>", {"class":"oculta","id":"file_upload_"+i,}).html("Subiendo foto...").append(
$("<i/>",{"class":"fa fa-spinner fa-spin fa-fw"}))
);
$("#form_hide").append(
$("<form/>",{"name":"fichero"+i,"method":"post","enctype":"multipart/form-data"}).append(
$("<input>",{"type":"hidden", "name":"destino", "value":"galeria"}),
$("<input>",{"type":"hidden", "name":"random", "value":random}),
$("<input>",{"id":"fichero"+i,"type":"file", "name":"fichero"})
)
);
}
}
function dar_valor_files(num_form){
/*DAR VALOR A filte y a text*/
$('input[id=fichero'+num_form+']').click(function(){
console.log($(this).val());
});
}
What I want with what I have messed with is for each form that is people in this case type text, also generate a type file, when you click on the form type text I want the File type to be executed, select the image , select the text type value of the image, once selected to be saved in my made folders and then show it and that text value is what will be saved in the database when I send it, I do not know if I understand but I need help
Greetings.