txt - listar archivos de una carpeta javascript

Cómo eliminar un archivo seleccionado específico del control de archivos de entrada

Question

¿Cómo eliminar un archivo seleccionado específico del control de archivo de entrada?

Tengo un control de entrada de archivos con la opción de seleccionar múltiples archivos; sin embargo, quiero validar un archivo y si tiene una extensión incorrecta, entonces debería eliminar ese archivo del control de archivos en sí, ¿es posible?

Lo intenté a continuación

<input type="file" name="fileToUpload" id="fileToUpload" multiple/>
<script> $("#fileToUpload")[0].files[0] </script>

A continuación se muestra la captura de pantalla del objeto, pero no puedo modificarlo

Answer 1

Como otras personas señalaron, FileList es de solo lectura. Sin embargo, puedes evitar esto si insertas esos archivos en un Array separado. A continuación, puede hacer lo que quiera con esa lista de archivos seleccionados. Si el objetivo es subirlos a un servidor, puede usar la API de FileReader .

A continuación hay una ronda sobre cómo evitar por completo la necesidad de modificar FileList . Pasos:

1. Añadir un detector de eventos de cambio de entrada de archivo normal
2. Pasa por cada archivo del evento de cambio, filtra para la validación deseada
3. Empuje los archivos válidos en una matriz separada
4. Use FileReader API para leer archivos localmente
5. Presentar archivos válidos y procesados ​​al servidor

Manejador de eventos y código de bucle de archivo básico:

var validatedFiles = [];
$("#fileToUpload").on("change", function (event) {
var files = event.originalEvent.target.files;
files.forEach(function (file) {
if (file.name.matches(/something.txt/)) {
validatedFiles.push(file); // Simplest case
} else {
/* do something else */
}
});
});

A continuación se muestra una versión más complicada del bucle de archivo que muestra cómo puede utilizar la API de FileReader para cargar el archivo en el navegador y opcionalmente enviarlo a un servidor como un blob codificado en Base64.

 files.forEach(function (file) {
if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side
var reader = new FileReader();
// Setup listener
reader.onload = (function (processedFile) {
return function (e) {
var fileData = { name : processedFile.name, fileData : e.target.result };
// Submit individual file to server
$.post("/your/url/here", fileData);
// or add to list to submit as group later
validatedFiles.push(fileData);
};
})(file);
// Process file
reader.readAsDataURL(file);
} else {
/* still do something else */
}
});

Una nota de precaución sobre el uso de la API de FileReader . Base64 que codifica un archivo aumentará su tamaño en aproximadamente un 30%. Si eso no es aceptable, tendrá que intentar algo más.

Answer 2

Pensé que debería agregar mi comentario aquí también (he respondido aquí: JavaScript borra el archivo de FileList para cargarlo )

Encontré una solución. Esto no requerirá AJAX para la solicitud y el formulario se puede enviar al servidor. Básicamente, puede crear una entrada hidden o de text y establecer su atributo de value en la cadena base64 creada después de procesar el archivo seleccionado.

<input type=hidden value=${base64string} />

Probablemente considerarás la idea de crear múltiples archivos de entrada en lugar de text de entrada u hidden . Esto no funcionará ya que no podemos asignarle un valor.

Este método incluirá el archivo de entrada en los datos enviados a la base de datos e ignorará el archivo de entrada que pueda:

• en el back-end no consideran el campo;
• puede establecer el atributo disabled en el archivo de entrada antes de serializar el formulario;
• eliminar el elemento DOM antes de enviar datos.

Cuando desee eliminar un archivo, simplemente obtenga el índice del elemento y elimine el elemento de entrada (texto u oculto) del DOM.

Requisitos:

• Debe escribir la lógica para convertir archivos en base64 y almacenar todos los archivos dentro de una matriz siempre que el archivo de entrada active el evento de change .

Pros:

• Esto básicamente le dará mucho control y puede filtrar, comparar archivos, verificar el tamaño del archivo, tipo MIME, etc.

Answer 3

html

<input id="fileInput" name="fileInput" type="file" />
<input onclick="clearFileInput()" type="button" value="Clear" />

javascript

 function clearFileInput(){
var oldInput = document.getElementById("fileInput");
var newInput = document.createElement("input");
newInput.type = "file";
newInput.id = oldInput.id;
newInput.name = oldInput.name;
newInput.className = oldInput.className;
newInput.style.cssText = oldInput.style.cssText;
// copy any other relevant attributes
oldInput.parentNode.replaceChild(newInput, oldInput);
}