2

Estimados tengo la siguiente duda.

Mediante CSS eh creado una mascara para poder darle estilos a un input file, pero me gustaría mostrar el nombre del texto de la misma forma que lo hace un input file por defecto. Es decir que el texto se muestre abreviado con los tres puntos suspensivos en medio.

Como ejemplo estoy subiendo un archivo con un nombre muy grande llamado dsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.zip

Cuando paso el nombre del archivo al label con jquery el nombre se ve incompleto debido a lo largo que es. En cambio el input por defecto lo acorta como se ve en la imagen

introducir la descripción de la imagen aquí

<div class="col-12 mb-4">
    <label class="inputfile">
        <input type="file" name="archivo" id="archivo" class="" accept=".zip,.rar,.7zip">
        <span class="btn-seleccionar bg-danger text-white text-center">
            <i class="icon-upload"></i>
            <p>Seleccionar Archivo...</p>
        </span>
        <span class="nombre-archivo py-2 px-3">Sin Nombre</span>
    </label>
    <input type="file">
</div>

Función en Jquery

$('#archivo').change(function(){
    var extensiones_permitidas = new Array(".rar", ".jpg", ".zip", ".pdf");
    var archivo = document.getElementById('archivo');
    var permitida = false;
    if(archivo.value != ""){
        var nombre = archivo.files[0].name;
        var extension = nombre.substring(nombre.lastIndexOf(".")).toLowerCase();
        
        for (var i = 0; i < extensiones_permitidas.length; i++) {
            if (extensiones_permitidas[i] == extension) {
                permitida = true;
                
            }
        }
        if(!permitida){
            $('.nombre-archivo').html('Extension de archivo no valida');
            archivo.value = "";
        }else{
            $('.nombre-archivo').html(nombre);
        }

        
    }
    
});

1 respuesta 1

1

Podemos lograr algo similar usando:

En CSS, ::before crea un pseudoelemento que es el primer hijo del elemento seleccionado. [...]

En CSS, ::after crea un pseudo-elemento que es el último hijo del elemento seleccionado. [...]

La propiedad content se usa junto con los pseudo-elementos :before y :after para generar contenido que se adjunta antes o después de un selector CSS.

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. [...]

La propiedad direction se utiliza para indicar en que dirección fluye el texto: rtl para hebreo o árabe y ltr para otros tipos de escritura. [...]

La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. [...]

Teniendo todo lo anterior en cuenta, podemos partir la cadena a la mitad y guardar en el data-attribute del elemento:

  • La primer parte de la cadena en pseudo elemento ::before (el cual va a ocupar el 50% disponible) y tendrá ellipsis para que a la cadena se le agregue ...
  • La segunda parte estará en el pseudo elemento ::after (el cual ocupara el otro 50%) y el texto en este estará alineado usan rtl

Ejemplo:

let $element = $('.nombre-archivo'),
  filename = 'dsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.zip',
  // Dividimos el nombre a la "mitad"
  middle = Math.ceil(filename.length / 2),
  start = filename.substr(0, middle),
  end = filename.substr(middle);

// Guardamos el texto en el data-attribute
$element.attr({
  'data-start': start,
  'data-end': end
});
body {
  max-width: 400px;
}

.nombre-archivo::before,
.nombre-archivo::after {
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;
}

.nombre-archivo::before {
  content: attr(data-start);
  text-overflow: ellipsis;
}

.nombre-archivo::after {
  content: attr(data-end);
  text-overflow: '';
  direction: rtl;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nombre-archivo py-2 px-3"></span>


Referencias:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.