Estoy luchando con bootstrap 4 explorador de archivos. Si yo uso personalizado-control de archivo voy a ver a Elegir archivo de valor todo el tiempo.
https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Me gustaría cambiar el valor de elegir archivo después de que el archivo ha sido elegido. Este valor es en realidad oculta en css .custom-file-control:lang(en)::after y no sé cómo acceder y cambiar en javascript. Puedo obtener el valor de archivo elegido como este:

document.getElementById("exampleInputFile").value.split("\").pop();

no necesito cambiar

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

de alguna manera

link: http://codepen.io/Matoo125/pen/LWobNp

Esta pregunta ha sido respondida antes aquí: stackoverflow.com/questions/37713126/…
no realmente, me preguntó cómo cambiar la propiedad de css contenido, ya que es donde Bootstrap 4 que tiene el texto se hace en este enfoque. No veo el valor
Puedes publicar tu código y te voy a mostrar cómo
codepen.io/Matoo125/pen/LWobNp
pero quiero acceder a ella de forma dinámica basándose en el valor de la entrada. ¿Cómo puedo hacer eso con css?

OriginalEl autor Matej Vrzala M4 | 2017-04-06

8 Comentarios

  1. 41

    Actualizado 2018

    Bootstrap 4.1+

    Ahora en Bootstrap 4.1 la «Elegir archivo…» texto de marcador de posición se establece en el custom-file-label:

    <div class="custom-file" id="customFile" lang="es">
            <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
            <label class="custom-file-label" for="exampleInputFile">
               Select file...
            </label>
    </div>

    Cambiar el botón «Examinar» texto requiere un poco de CSS o SASS. Observe también cómo idioma de traducción de obras el uso de la lang="" atributo.

    .custom-file-input ~ .custom-file-label::after {
        content: "Button Text";
    }

    https://www.codeply.com/go/gnVCj66Efp (CSS)

    https://www.codeply.com/go/2Mo9OrokBQ (SASS)

    Otro Bootstrap 4.1 Opción

    Alternativamente, usted puede utilizar este archivo personalizado de entrada plugin

    https://www.codeply.com/go/uGJOpHUd8L/file-input


    Bootstrap 4 Alpha 6 (Respuesta Original)

    Creo que hay 2 temas separados aquí..

    <label class="custom-file" id="customFile">
            <input type="file" class="custom-file-input">
            <span class="custom-file-control form-control-file"></span>
    </label>

    1 – Cómo el cambio de la inicial de marcador de posición y el texto del botón

    En Bootstrap 4, el inicial valor del marcador de posición se establece en el custom-file-control con un CSS pseudo ::after elemento basadas en el lenguaje HTML. El archivo inicial botón (que en realidad no es un botón, pero se parece a uno) se establece con un CSS pseudo ::before elemento. Estos valores pueden modificarse con CSS..

    #customFile .custom-file-control:lang(en)::after {
      content: "Select file...";
    }
    
    #customFile .custom-file-control:lang(en)::before {
      content: "Click me";
    }

    2 – Cómo obtener el nombre de archivo seleccionado valor, y la actualización de la entrada para mostrar el valor.

    Una vez que un archivo es seleccionado, el valor puede ser obtenido usando JavaScript/jQuery.

    $('.custom-file-input').on('change',function(){
        var fileName = $(this).val();
    })

    Sin embargo, dado que el texto de marcador de posición para la entrada es un pseudo elemento, no hay una manera fácil de manipular este con Js/jQuery. Sin embargo, puede haber otra clase de CSS que oculta el pseudo contenido una vez seleccionado el archivo…

    .custom-file-control.selected:lang(en)::after {
      content: "" !important;
    }

    El uso de jQuery para cambiar el .selected de la clase en el .custom-file-control una vez seleccionado el archivo. Esto ocultará la inicial del valor del marcador de posición. A continuación, poner el valor de nombre de archivo en el .form-control-file span…

    $('.custom-file-input').on('change',function(){
      var fileName = $(this).val();
      $(this).next('.form-control-file').addClass("selected").html(fileName);
    })

    Luego puede manejar la carga de archivos o re-selección según sea necesario.

    Demo en Codeply (alfa 6)

    C:\fakepath\... muy divertido.
    Donde es este C:\fakepath\... viene?
    Gracias por la solución. Me estoy poniendo mismo C:\fakepath\.. en firefox developer edition, hay una manera de solucionar este problema?
    He utilizado esto para obtener el nombre de archivo sin «fakepath»: var fileName = document.getElementById("upload-image-input").files[0].name;
    Supongo que cambiar en algún momento, pero ahora son capaces de simplemente cambiar el texto visible fragmento de establecer el texto de la span etiqueta

    OriginalEl autor Zim

  2. 45

    Me acaba de resolver de esta manera

    Html:

    <div class="custom-file">
       <input id="logo" type="file" class="custom-file-input">
       <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
    </div>

    JS:

    $('.custom-file-input').on('change', function() { 
       let fileName = $(this).val().split('\').pop(); 
       $(this).next('.custom-file-label').addClass("selected").html(fileName); 
    });

    Nota: Gracias a ajax333221 por mencionar el .text-truncate clase que oculte el desbordamiento en la etiqueta si el nombre de archivo es demasiado largo.

    Gracias por la .split('\\').pop() parte!
    feliz ayudó
    FWIW, he tenido que añadir type="file" a la <input> etiqueta. Pero por lo demás, gran trabajo.
    mi respuesta fue un diseño rápido cosita, pero solo voy a agregar el type atributo también, para aquellos que se copia. Gracias
    Vale la pena decir que pueden ocultar el desbordamiento de con texto-truncar, como en este class='custom-file-label text-truncate'

    OriginalEl autor Elnoor

  3. 5

    Para cambiar el idioma del explorador de archivos:

    Como una alternativa a lo que ZimSystem mencionado (reemplazar el CSS), una solución más elegante es sugerido por el bootstrap docs: construir personalizado bootstrap estilos mediante la adición de idiomas en SECS

    Leer sobre ello aquí: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

    Nota: necesita tener el atributo lang configurado correctamente en el documento para que esto funcione

    Para la actualización del valor de selección de archivo:

    Usted puede hacerlo en línea con js como este:

       <label class="custom-file">
          <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\').slice(-1)[0])">
          <span class="custom-file-control"></span>
       </label>

    Nota: el .split('\\').slice(-1)[0] parte, se quita la C:\fakepath\ prefijo

    De niza. El uso de este para agregar todos los archivos personalizados entradas: $('.custom-file-input').change(function () { $(this).next().after().text($(this).val().split('\\').slice(-1)[0]); });

    OriginalEl autor Razvan Pocaznoi

  4. 1

    Acabo de añadir este en mi archivo CSS y funciona:

    .custom-file-label::after{content: 'New Text Button' !important;}
    
    

    OriginalEl autor Robson Sousa

  5. 1

    Bootstrap 4

    Hoy necesito crear un botón examinar con multi-subir los archivos de la opción por encima de todos los fragmentos no son buenos para mí.

    La oficial de Bootstrap ejemplo también es que no funciona cuando puedo seleccionar varios archivos.

    Vengo con este código se puede ayudar a otras personas en el futuro.

    <div class="container mt-5">
      <h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
      <div class="col-sm-4 mr-auto ml-auto border p-4">
      <form method="post" enctype="multipart/form-data" action="upload.php">
        <div class="form-group">
          <label><strong>Upload Files</strong></label>
          <div class="custom-file">
            <input type="file" name="files[]" multiple class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
        </div>
      </form>
    </div>

    El código js que se dan a continuación.

    $(document).ready(function() {
      $('input[type="file"]').on("change", function() {
        let filenames = [];
        let files = document.getElementById("customFile").files;
        if (files.length > 1) {
          filenames.push("Total Files (" + files.length + ")");
        } else {
          for (let i in files) {
            if (files.hasOwnProperty(i)) {
              filenames.push(files[i].name);
            }
          }
        }
        $(this)
          .next(".custom-file-label")
          .html(filenames.join(","));
      });
    });

    El código de trabajo el ejemplo que se da es aquí.

    https://codepen.io/mianzaid/pen/GeEbYV

    OriginalEl autor Zaid Bin Khalid

  6. 0

    Solución basada en @Elnoor respuesta, pero el trabajo con múltiples archivos formulario de carga de entrada y sin el «fakepath hack»:

    HTML:

    <div class="custom-file">
        <input id="logo" type="file" class="custom-file-input" multiple>
        <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
    </div>

    JS:

    $('input[type="file"]').on('change', function () {
        let filenames = [];
        let files = document.getElementById('health_claim_file_form_files').files;
    
        for (let i in files) {
            if (files.hasOwnProperty(i)) {
                filenames.push(files[i].name);
            }
        }
    
        $(this).next('.custom-file-label').addClass("selected").html(filenames.join(',    '));
    });

    OriginalEl autor Sicaa

  7. -1
     <!doctype html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <title>Hello, world!</title>
    </head>
    <body>
    <h1>Hello, world!</h1>
    <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script>
    $(function() {
    $(document).on('change', ':file', function() {var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');input.trigger('fileselect', [numFiles, label]);
    });
    $(document).ready( function() {
    $(':file').on('fileselect', function(event, numFiles, label) {var input = $(this).parents('.custom-file').find('.custom-file-label'),
    log = numFiles > 1 ? numFiles + ' files selected' : label;if( input.length ) {input.text(log);} else {if( log ) alert(log);}});
    });
    });
    </script>
    </body>
    </html>

    OriginalEl autor Ocool Sanni

  8. -1

    Sin JQuery

    HTML:

    <INPUT type="file" class="custom-file-input"  onchange="return onChangeFileInput(this);">

    JS:

    function onChangeFileInput(elem){
    var sibling = elem.nextSibling.nextSibling;
    sibling.innerHTML=elem.value;
    return true;
    }

    KliG

    OriginalEl autor KliG

Dejar respuesta

Please enter your comment!
Please enter your name here