Un formulario en mi página HTML tiene los siguientes 3 campos que se pueden usar para cargar 3 archivos separados.
<div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required> <div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required> </div> <div class="form-group"> <label>Property Cover Image</label> <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required> </div> <div class="form-group"> <label>Other Property Images</label> <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required> </div>Y después de cargar los archivos, estaba usando el siguiente código Javascript para obtener los archivos cargados y agregarlos al resto de los datos del formulario. (Se tuvieron que usar las clases porque solo se ha redactado 1 código API para cargar archivos)
let formData = new FormData(); for (let file of document.getElementsByClassName('file_upload').files) { formData.append("files", file); }Pero esto arroja un error de que esto no es iterable.
¿Cuál es el mejor método para hacer esto?
¡Gracias por adelantado!
getElementsByClassName devuelve un objeto similar a una matriz de todos los elementos secundarios que tienen todos los nombres de clase dados. árbitro
La palabra clave importante es array-like ... Para iterar eso, necesita una matriz real. Entonces puedes usar Array.from() .
Y luego, para cada elemento, desea el primer archivo de la matriz de archivos.
También usé FormData.getAll() solo para consolar.Registrar el resultado...
document.getElementById("test").addEventListener("click", function() { let formData = new FormData(); for (let inputElement of Array.from(document.getElementsByClassName('file_upload'))) { formData.append("files", inputElement.files[0]); } console.log(formData.getAll("files")) }) <div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required> <div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required> </div> <div class="form-group"> <label>Property Cover Image</label> <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required> </div> <div class="form-group"> <label>Other Property Images</label> <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required> </div> </div> <br> <button id="test">Append to FormData</button>