Estoy tratando de filtrar algunos de los archivos seleccionados por el usuario en un elemento de entrada de archivos múltiples en mi formulario html5 antes del envío. Parece que puede eliminar TODOS los archivos seleccionados por el usuario de cualquier entrada de archivo en el formulario o ninguno de los archivos seleccionados por el usuario de una entrada de archivo antes de enviar el formulario y cargarlo en el servidor. Sería bueno poder eliminar cualquier archivo ofensivo antes de cargarlo. De lo contrario, debe permitir que los archivos se carguen y hacer que php se ocupe de los archivos cargados después del envío. Gracias por cualquier idea.
Parece que mis sospechas se confirmaron y la única forma de agregar archivos a una entrada de archivo es establecerlo igual a un objeto de transferencia de datos, es decir:
fileInput.files=evt.dataTransfer.files;
evt.dataTransfer.files representa los archivos que el usuario seleccionó/eliminó y no se pueden cambiar a través del código js en la página.
No pude agregar archivos a una entrada de archivo usando formData.append() para agregar archivos individuales en múltiples iteraciones aditivas a una entrada de archivo.
Esta solución a continuación está funcionando. El proceso consiste en instanciar su propio objeto DataTransfer al cargar la página. Luego obtenga los archivos cargados por el usuario de evt.dataTransfer.files en cada arrastre o navegue e itere a través de ellos. Cuando encuentre archivos que cumplan con sus criterios, agréguelos a su propio objeto DataTransfer personalizado. Una vez que su propio objeto de transferencia de datos esté configurado con los archivos que desea agregar después de que cada usuario los suelte, actualice fileInput.files= su propio objeto de transferencia de datos.
cargar:
var dT=new dataTransfer(); var fileInput=document.forms[0].elements['files[]'];
// ahora en cada gota obtendrá los archivos seleccionados por el usuario como: evt.dataTransfer.files
para que siempre comience con eso.
function dropHandler(evt) { //prevent default action evt.preventDefault(); evt.stopPropagation(); //for each file in the user selection, validate them as you wish //and only add the ones you want to the dataTransfer object you already created. for (const file of evt.dataTransfer.files) { //if this validate that etc //if file is good to add dT.items.add(file); } //at the end of each drop //once you have added only the files you want to your own dT object //update your form's file input's files to the latest version of your dT object's files fileInput.files=dT.files; }//end drop handler function`
Ahora tiene la entrada de archivo de su formulario rellenada solo con los archivos seleccionados por el usuario que desea, ha eliminado el resto y está listo para enviar el formulario.