J'ai stylé une entrée de fichier en utilisant CSS:
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>
Tout fonctionne bien, mais je voudrais afficher le nom du fichier sélectionné. Comment est-ce possible d'utiliser CSS ou jQuery?
Vous devez lier et déclencher l'événement change sur le [type=file]
élément et lit le nom du fichier comme suit:
$('#file-upload').change(function() {
var i = $(this).prev('label').clone();
var file = $('#file-upload')[0].files[0].name;
$(this).prev('label').text(file);
});
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>
Vous devez obtenir le nom du fichier lorsque l’entrée change et l’insérer dans HTML. Dans le code this.files[0].name
obtenir le nom du fichier sélectionné.
$("#file-upload").change(function(){
$("#file-name").text(this.files[0].name);
});
$("#file-upload").change(function(){
$("#file-name").text(this.files[0].name);
});
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
<label id="file-name"></label>
</form>
Aussi, vous pouvez faire ce travail en utilisant javascript pur
document.querySelector("#file-upload").onchange = function(){
document.querySelector("#file-name").textContent = this.files[0].name;
}
document.querySelector("#file-upload").onchange = function(){
document.querySelector("#file-name").textContent = this.files[0].name;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
<label id="file-name"></label>
</form>
Vous pouvez prendre le nom du fichier comme ceci
$('#file-upload')[0].files[0].name
Vous pouvez également l'utiliser pour le téléchargement de plusieurs fichiers.
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '<ul>';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
}
output.innerHTML += '</ul>';
}
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<div id="fileList"></div>
Pour les solutions CSS uniquement
.file_upload {
position: relative;
min-width: 90px;
text-align: center;
color: #ee3333;
line-height: 25px;
background: #fff;
border: solid 2px #ee3333;
font-weight: 600;
}
a.file_upload {
display: inline-block;
}
.file_upload .btn_lbl {
position: relative;
z-index: 2;
pointer-events: none;
}
.file_upload .btn_colorlayer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 1;
pointer-events: none;
}
.file_upload input[type="file"] {
position: absolute;
top: 3px;
left: -86px;
font-weight: 600;
margin-left: 100%;
color: #ee3333;
outline: none;
}
<button class="file_upload" type="button">
<span class="btn_lbl">Browse</span>
<span class="btn_colorlayer"></span>
<input type="file" name="fileupload" id="file_upload" />
</button>
Bouton Télécharger Style
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
J'espère que cela vous aide à avoir le style qui vous convient le mieux
HTML
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
<input id="uploadFile" placeholder="No File" disabled="disabled" />
</form>
[~ # ~] css [~ # ~]
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
#uploadFile {
text-align: center;
border: none;
background-color: white;
color: black;
}
JavaScript
document.getElementById("file-upload").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
Lien JSFiddle : https://jsfiddle.net/kd1brhny/