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

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

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

He intentado lo siguiente

<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

introduzca la descripción de la imagen aquí

Author: Gone Coding, 2013-09-28
Source

3 answers

Como otras personas señalaron, FileList es de solo lectura. Sin embargo, puede evitar esto empujando esos archivos en un Array separado. Luego puede hacer lo que quiera con esa lista de archivos curada. Si el objetivo es subirlos a un servidor, puede usar el FileReader API.

A continuación se muestra una forma de evitar completamente la necesidad de modificar el FileList. Pasos:

  1. Agregar entrada de archivo normal cambiar el oyente de eventos
  2. Recorre cada archivo desde cambiar evento, filtrar para la validación deseada
  3. Insertar archivos válidos en una matriz separada
  4. Use FileReader API para leer archivos localmente
  5. Enviar archivos válidos procesados al servidor

Controlador 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 archivos que muestra cómo puede usar la API 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 acerca del uso de la API FileReader. Base64 codificar un archivo aumentará su tamaño en alrededor de un 30%. Si eso no es aceptable, tendrá que probar otra cosa.

 32
Author: Andrew Hubbs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-07 23:02:39

Pensé que debería agregar mi comentario aquí también aquí (he respondido aquí: JavaScript eliminar archivo de la lista de archivos para ser subido )

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

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

Probablemente considere la idea de crear múltiples entradas archivo en lugar de entrada text o 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 y para ignorar el archivo de entrada podría:

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

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

Requisitos:

  • Necesita escribir la lógica para convertir archivos en base64 y almacenar todos los archivos dentro de una matriz cada vez que el archivo de entrada desencadene el evento change.

Ventajas:

  • Esto básicamente le dará mucho de control y puede filtrar, comparar archivos, verificar el tamaño del archivo, el tipo MIME, etc..
 2
Author: Michael Mammoliti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-30 11:22:21

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);
    }
 -9
Author: Ehsan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-27 11:52:41