Aquí estoy creando un FormData usando ajax para poder enviar algunos archivos de entrada al script php y luego guardarlo como un blob en mi base de datos. La pregunta es cómo puedo recorrer dinámicamente FormData después de enviarlo al script php para poder obtener cada nombre dinámicamente y guardar lo que el usuario ha cargado y dejar las entradas vacías como están.
para más explicación:
<input id = "Pay_cert1" type="file" name="" /> <input id = "Pay_cert2" type="file" name="" /> <input id = "Pay_cert3" type="file" name="" /> <input id = "Pay_cert4" type="file" name="" />luego obtengo los valores de las entradas "si hay un valor" y lo agrego a mi formulario de datos
var Pay_cert1= $('#Pay_cert1').prop('files')[0]; var Pay_cert2= $('#Pay_cert2').prop('files')[0]; var Pay_cert3= $('#Pay_cert3').prop('files')[0]; var Pay_cert4= $('#Pay_cert4').prop('files')[0]; var form_data = new FormData(); if(document.getElementById("Pay_cert1").files.length != 0) { form_data.append('Pay_cert1', Pay_cert1); } if(document.getElementById("Pay_cert2").files.length != 0) { form_data.append('Pay_cert2', Pay_cert2); } if(document.getElementById("Pay_cert3").files.length != 0) { form_data.append('Pay_cert3', Pay_cert3); } if(document.getElementById("Pay_cert4").files.length != 0) { form_data.append('Pay_cert4', Pay_cert4); } $.ajax({ url: 'Upload.php', cache: false, contentType: false, processData: false, data:form_data , type: 'post', success : function(data) { } });aquí en PHP quiero hacer un bucle dinámico en mi DataForm y obtener el tmpname de cada archivo que se ha agregado solamente, entonces, ¿cómo puedo decir
foreach(name in $_FILES['']) // how can I loop here on DataForm and get each tmpname?? { console.log( $_FILES['name']['tmp_name']); }Foreach se ve así en php
Y así es como se ve $_FILES
Así que en Upload.php puedes cambiar tu código de
foreach(name in $_FILES['']) // how can I loop here on DataForm and get each tmpname?? { console.log( $_FILES['name']['tmp_name']); }a
foreach($_FILES as $key => $file ) { // $key is index and $file is item echo "this is ".$file['tmp_name']; // like console.log in js }Ahora puede interactuar con la variable $_FILES, lo que significa que accederá a cada nombre temporal
Si tuviera que usar querySelectorAll para encontrar todos los elementos de entrada del archivo, puede iterarlos y asignar un nombre y valor al objeto FormData de una manera mucho más clara que la que se muestra arriba.
Cada archivo se puede appended a la variable que necesita usar la sintaxis de array para nombrar, es decir: files[]
Con esa variable, configure la solicitud Ajax (aquí usando fetch para simplificar), el código PHP que procesa la carga puede iterar a través de la colección $_FILES usando files como nombre, es decir: $_FILES['files'] o cualquier variable que haya asignado en fd.append('NAME[]',value) anterior.
<?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_FILES['files'] ) ){ $output=array(); foreach( $_FILES['files']['name'] as $i => $name ) { if( !empty( $_FILES['files']['tmp_name'][$i] ) ) { $name = $_FILES['files']['name'][$i]; $size = $_FILES['files']['size'][$i]; $type = $_FILES['files']['type'][$i]; $tmp = $_FILES['files']['tmp_name'][$i]; $error= $_FILES['files']['error'][$i]; $ext = pathinfo( $name, PATHINFO_EXTENSION ); # do what you need to save the files and generate some output to send back to the AJAX callback $output[]=array( 'name'=>$name, 'size'=>$size, 'type'=>$type, 'ext'=>$ext, 'date'=>date(DATE_ATOM) ); } } exit( json_encode($output) ); } ?> <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title></title> <style>input{clear:both;display:block;margin:0.5rem 0;padding:0.5rem;}</style> </head> <body> <input type="file" name="Pay_cert1" /> <input type="file" name="Pay_cert2" /> <input type="file" name="Pay_cert3" /> <input type="file" name="Pay_cert4" /> <input type='button' value='Upload' /> <script> document.querySelector('input[type="button"]').addEventListener('click',(e)=>{ let url=location.href; //'Upload.php'; let fd = new FormData(); document.querySelectorAll('input[type="file"][name^="Pay_cert"]').forEach(n => { if ( n.files.length > 0 ) { fd.append( 'files[]', n.files[0], n.name ); } }); fetch( url, { method:'post', body:fd } ) .then( r=>r.json() ) .then( json=>{ console.log(json) }) }); </script> </body> </html>