Comment supprimer un champ de texte d'une entrée de fichier HTML

Question

Normalement, une boîte de dialogue de téléchargement de fichier est appelée en cliquant sur le bouton créé par <input type="file"/>. Mais alors, je ne veux pas le champ de texte qui l'accompagne. Y a-t-il un moyen de se débarrasser du champ de texte? Ou existe-t-il un moyen alternatif d'ouvrir la boîte de dialogue de téléchargement de fichier sans utiliser <input/>?

Answer 1

Vous pouvez utiliser une alternative au flash. J'ai utilisé swfUpload, avec beaucoup de succès. Uploadify, est une alternative similaire. Les deux ont de bons ensembles de fonctionnalités, y compris les barres de progression et le téléchargement multiple.

Answer 2

Vous pouvez le remplacer par un bouton-poussoir comme indiqué ou vous pouvez masquer le bouton en plaçant votre propre bouton sur le dessus de l'élément d'entrée et ouvrir la boîte de sélection par un script.

Quelques exemples ici: inputfile

Answer 3

Vérifiez le plugin jQuery http://www.uploadify.com/.

Answer 4

Ajoutez une entrée de fichier et définissez sa position assez loin.
Ajouter un bouton. boutons Set onclick $("#myFile").click(); : D

<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;"> 

<button onclick="$('#myFile').click();">Browse</button> 

Answer 5

Vous pouvez ajouter votre propre bouton et le positionner sous le bouton de navigation avec CSS.

Définissez ensuite l'entrée de fichier pour avoir 0 opacité.

Answer 6

accord avec alex

<style> 
.file_wrap{ 
    background:url(file.jpg); 
    overflow:hidden; 
    width:30px; 
    height:10px; 
} 
.file_wrap input{ 
    opacity:0; 
    font-size:999px; 
    cursor:pointer; 
} 
</style> 
<div class="file_wrap"> 
    <input type="file" /> 
</div> 

Answer 7

Si vous utilisez jQuery, jetez un oeil à ce plugin - https://github.com/ajaxray/bootstrap-file-field

Ce petit plugin affichera le champ de saisie de fichier comme un bouton d'amorçage (aucun champ de saisie de texte), similaire dans tous les navigateurs et affichera les noms de fichiers sélectionnés (ou les erreurs de sélection) magnifiquement. Vérifiez leur démonstration en direct .

De plus, vous pouvez définir diverses restrictions à l'aide de simples attributs de données ou paramètres JS. e, g, data-file-types="image/jpeg,image/png" limitera la sélection des types de fichiers à l'exception des images jpg et png.