type d'entrée = bouton afficher uniquement le fichier
Y at-il un moyen de style (ou script) <input type=file /> élément pour avoir visible que le bouton "Parcourir" sans champ de texte?
Merci
Edit : Juste pour préciser pourquoi j'ai besoin de cela. J'utilise un code de téléchargement de plusieurs fichiers à partir de http://www.morningz.com/?p=5 et il n'a pas besoin de champ de texte de saisie car il n'a jamais de valeur. Le script ajoute simplement le fichier nouvellement sélectionné à la collection sur la page. Cela semblerait beaucoup mieux sans champ de texte, si c'est possible.
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Cela fonctionnera sûrement je l'ai utilisé dans mes projets. J'espère que cela aide :)
J'avais une sacrée occasion d'essayer d'accomplir cela. Je ne voulais pas utiliser une solution Flash et aucune des bibliothèques jQuery que j'ai consultées n'était fiable sur tous les navigateurs.
Je suis venu avec ma propre solution, qui est complètement implémentée en CSS (à l'exception du changement de style onclick pour que le bouton apparaisse 'cliqué').
Vous pouvez essayer un exemple de travail ici: http://jsfiddle.net/VQJ9V/307/ (testé en FF 7 , IE 9, Safari 5, Opera 11 et Chrome 14)
Cela fonctionne en créant une entrée de gros fichier (avec une taille de police: 50px), puis en l'enveloppant dans un div ayant une taille fixe et un débordement: hidden. L'entrée n'est alors visible que par cette "fenêtre" div. Une image ou une couleur d’arrière-plan peut être donnée au div, du texte peut être ajouté et l’entrée peut être rendue transparente pour révéler l’arrière-plan du div:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
Faites-moi savoir s'il y a des problèmes et je vais essayer de les résoudre.
J'ai passé ma journée aujourd'hui à faire en sorte que cela fonctionne. J'ai trouvé aucune des solutions ici travaillant chacun de mes scénarios.
Puis je me suis rappelé que j'avais vu un exemple pour le téléchargement de fichier JQuery sans zone de texte. Donc, ce que j'ai fait, c'est que j'ai pris leur exemple et l'ai réduit à la partie pertinente.
Cette solution fonctionne au moins pour IE et FF et peut être entièrement stylisée. Dans l'exemple ci-dessous, l'entrée du fichier est masquée sous le bouton "Ajouter des fichiers".
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>
Cachez l'élément de fichier d'entrée et créez un bouton visible qui déclenchera l'événement click de ce fichier d'entrée.
Essaye ça:
CSS
#file { width:0; height:0; }
HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>
JAVASCRIPT (jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});
Cachez la balise du fichier d'entrée avec css, ajoutez une étiquette et affectez-la au bouton d'entrée. L'étiquette sera cliquable et lorsque vous cliquerez dessus, la boîte de dialogue de fichier s'ouvrira.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>
Ajoutez le style à l'étiquette en tant que bouton.
démonstration en direct
Cela va être très difficile. Le problème avec le type d'entrée de fichier est qu'il se compose généralement de deux éléments visuels, tout en étant traité comme un seul élément DOM. Ajoutez à cela que plusieurs navigateurs ont leur propre apparence pour le fichier en entrée, et vous êtes prêt pour le cauchemar. Voir ceci article sur quirksmode.org à propos des bizarreries de l’entrée de fichier. Je vous garantis que cela ne vous rendra pas heureux (je parle d'expérience).
[MODIFIER]
En fait, je pense que vous pourriez vous en tirer en plaçant votre entrée dans un élément conteneur (comme un div) et en ajoutant une marge négative à l'élément. Cacher efficacement la partie de la zone de texte hors écran. Une autre option consisterait à utiliser la technique décrite dans l'article que j'ai lié pour essayer de l'appeler comme un bouton.
Correctif pour fonctionner dans tous les navigateurs RÉSOLU:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>
J'ai testé en FF, Chrome et IE - fonctionne bien, styles appliqués également: D
J'ai essayé de mettre en œuvre les deux solutions principales et cela a été une énorme perte de temps pour moi. En fin de compte, l’application de cette classe .css a résolu le problème ...
input[type='file'] {
color: transparent;
}
Terminé! super propre et super simple ...
Un autre moyen facile de le faire. Créez une balise "input type file" en HTML et masquez-la. Puis cliquez sur un bouton et formatez-le selon vos besoins. Après cela, utilisez javascript/jquery pour cliquer par programme sur la balise d’entrée lorsque vous cliquez sur le bouton.
HTML: -
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>
JavaScript: -
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});
jQuery: -
$('#button').click(function(){
$('#file').click();
});
CSS: -
#button
{
background-color: blue;
color: white;
}
Voici un violon JS qui fonctionne pour le même: - http://jsfiddle.net/32na3/
J'ai utilisé une partie du code recommandé ci-dessus et après de nombreuses heures de retard, je suis finalement arrivé à une solution sans sac CSS.
Vous pouvez le lancer ici - http://jsfiddle.net/WqGph/
mais a ensuite trouvé une meilleure solution - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>
Voici mon bon vieux remède:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
Au moins, cela a fonctionné dans Safari.
Clair et simple.
Vous pouvez attribuer à l'élément d'entrée une opacité de police de 0. Cela masquera le champ de texte sans masquer le bouton "Choisir les fichiers".
Aucun javascript requis, effacez le navigateur en traversée aussi loin que IE 9
Par exemple.,
input {color: rgba(0, 0, 0, 0);}
HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>
JQUERY
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});
J'espère que ça marche :)
Vous pouvez étiqueter une image pour que, lorsque vous cliquez dessus, l'événement de clic du bouton soit déclenché. Vous pouvez simplement rendre le bouton normal invisible:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>
Cela a fonctionné pour moi sur tous les navigateurs et est très facile à utiliser.
Vous pouvez répartir l'événement click sur une entrée de fichier cachée comme ceci:
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>Ive une solution vraiment hacky avec cela ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />
Le problème est que l’attribut width qui cache le champ de texte variera d’un navigateur à l’autre, d’un thème Windows à un autreXP, etc. Peut-être que tu peux travailler avec ça? ...
Cela fonctionne pour moi:
input[type="file"] {
color: white!important;
}
Je sais que ceci est un ancien message, mais un moyen simple de faire disparaître le texte consiste à définir la couleur du texte sur celle de votre arrière-plan.
par exemple, si votre arrière-plan de saisie de texte est blanc, alors:
input[type="file"]{
color:#fff;
}
Cela n’affectera pas le texte Choisir un fichier qui sera toujours noir en raison du navigateur.
ma solution est juste de le placer dans une div comme "druveen" dit, cependant j'ajoute mon propre style de bouton à la div (le fait ressembler à un bouton avec un: survol) et je viens de définir le style "opacity: 0;" à l'entrée. Travaille un charme pour moi, espère que cela fait la même chose pour vous.
Je viens de styler un fichier d'entrée avec une largeur de 85px, et le champ de texte a disparu du tout
Ce code HTML apparaît uniquement sur le bouton Télécharger un fichier
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form>
Il existe plusieurs options valables ici, mais je pensais donner ce que j’avais proposé en essayant de résoudre un problème similaire. http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}
Toutes ces réponses sont jolies, mais CSS ne fonctionnera pas car il n’est pas identique sur tous les navigateurs et appareils, la première réponse que j’ai écrite fonctionnera dans tout sauf Safari. Pour le faire fonctionner dans tous les navigateurs, il doit être créé de manière dynamique, puis recréé à chaque fois que vous souhaitez effacer le texte saisi:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);
J'ai écrit ceci:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />Fonctionne bien dans tous les navigateurs, pas de jQuery, pas de CSS.
La réponse de tmanthey est assez bonne, sauf que vous ne pouvez pas jouer avec border-width dans Firefox v20. Si vous voyez le lien (démo, ne peut pas vraiment montrer ici), ils ont résolu le problème en utilisant font-size = 23px, transformer: translate (-300px, 0px) scale (4) pour que Firefox puisse obtenir le bouton plus gros.
D'autres solutions utilisant .click () sur un div différent sont inutiles si vous voulez en faire une zone de saisie glisser-déposer.
Alors voici la meilleure façon de faire ceci FOR ALL BROWSERS:
Oubliez le CSS!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>
Résolu avec le code suivant:
<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>
Voici une version simplifiée de la solution populaire de @ ampersandre qui fonctionne dans tous les principaux navigateurs. Balisage Asp.NET
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />
Code JQuery
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});
code css
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Utilise un déclencheur de clic caché "UploadButton" pour la publication sur serveur avec standard. Le texte avec "Upload File" met le contrôle d'entrée hors de vue dans le div wrapper quand il déborde, il n'est donc pas nécessaire d'appliquer de styles pour le contrôle "entrée de fichier". Le sélecteur $ ([id $ = "FileInput"]) autorise la section des identifiants auxquels sont appliqués les préfixes ASP.NET standard. La valeur de la zone de texte FilePath définie dans le code serveur situé derrière hdnFileName.Value une fois le fichier téléchargé.
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});
Pour moi, le moyen le plus simple consiste à utiliser une couleur de police comme couleur de fond. Simple, pas élégant, mais utile.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>