Afficher le nom complet après sélection

Je travaille sur un formulaire où l'utilisateur doit sélectionner des fichiers. Ma question est comment puis-je faire lorsque l'utilisateur choisit un fichier afin que vous puissiez voir le nom du fichier apparaître complètement. Par exemple, un fichier avec le nom de toto_tata.xls, qui peut voir le nom du fichier toto_tata.xls qui apparaît après la sélection. J'ai essayé avec la taille mais sans succès. Voici le contenu de mon étiquette d'entrée ci-dessous:Afficher le nom complet après sélection

<input id="myFile" type="file" name="myFile"class="myFile" required="true"/>

Source

2017-07-19 John

Qu'est-ce que vous obtenez maintenant? – onetwo12

Je reçois le nom de fichier incomplet par exemple toto..ta.xls alors que le nom de fichier est toto_tata.xls. Si le nom de fichier est incomplet, je ne peux pas voir l'affichage complet du nom. L'avantage de voir le nom complet est que l'utilisateur peut voir une erreur s'il a choisi le mauvais fichier. – John

Si le nom de fichier est long, je ne peux pas voir le nom complet. Mais si c'est court je peux voir. Je veux en tout cas voir le nom complet du fichier choisi – John

Vous devriez obtenir le nom entier la mise en place de la largeur d'attribut css de l'entrée à 100%. Voici le codepen: https://codepen.io/Juanito/pen/yXdbaX

input { 
    width: 100%; 
}

Source

2017-07-19 09:02:25

Merci pour votre aide. Cela fonctionne avec la propriété css width. – John

gald pour aider !!! –

Essayez quelque chose comme ceci:

<input type="file" id="fileUpload"><span class="show-file-name"></span> 

$('input[type=file]').change(function() { 
    var fileName = $(this).val().match(/[^\\]*$/)[0]; 
    $('.show-file-name').text(fileName); 
})

Vous obtiendrez dans le span le nom du fichier. La seule chose qui reste est de supprimer le nom de fichier raccourci.

Ici travaille fiddle

Source

2017-07-19 09:15:37 onetwo12

En utilisant CSS vous pouvez ajouter width: 100%; dans votre entrée.

Pour exemple,

<input id="myFile" type="file" name="myFile"class="myFile" required="true" style="width: 100%;"/>

Source

2017-07-19 09:23:40

ajouter un style dans votre entrée. <input id="myFile" type="file" name="myFile"class="myFile" required="true" style="width:100%;"/> Cela fonctionnera bien pour moi.

Source

2017-07-19 09:38:58

Afficher le nom complet après sélection

Répondre

Questions connexes