Comment obtenir le nom du fichier lorsque l'utilisateur sélectionne un fichier via <input type = "file" />?
J'ai déjà vu des questions similaires, qui n'aboutissent à aucune solution pour des raisons de sécurité.
Mais aujourd'hui, je vois que hostmonster a implémenté cela avec succès, quand j'ouvre un ticket et attache un fichier dans leur backend.
Cela fonctionne à la fois avec Firefox et IE (version 8 pour être exact).
J'ai vérifié que c'est exactement le script côté client, aucune demande n'est envoyée (avec firebug).
Maintenant, pouvons-nous reconsidérer cette question?
Vous pouvez obtenir le nom du fichier, mais vous ne pouvez pas obtenir le chemin d'accès complet au système de fichiers du client.
Essayez d'accéder à l'attribut value de votre fichier input sur l'événement change.
La plupart des navigateurs ne vous donneront que le nom du fichier, mais il existe des exceptions comme IE8 qui vous donneront un chemin faux comme: "C:\fakepath\myfile.ext" et les versions antérieures (IE <= 6) qui vous donneront le chemin d'accès complet au système de fichiers du client (en raison de son manque de sécurité).
document.getElementById('fileInput').onchange = function () {
alert('Selected file: ' + this.value);
};
Vous pouvez utiliser le code suivant:
JS
function showname () {
var name = document.getElementById('fileInput');
alert('Selected file: ' + name.files.item(0).name);
alert('Selected file: ' + name.files.item(0).size);
alert('Selected file: ' + name.files.item(0).type);
};
HTML
<body>
<p>
<input type="file" id="fileInput" multiple onchange="showname()"/>
</p>
</body>
vient de tester cela et il semble fonctionner dans Firefox et IE
<html>
<head>
<script type="text/javascript">
function alertFilename()
{
var thefile = document.getElementById('thefile');
alert(thefile.value);
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" onchange="alertFilename()" />
<input type="button" onclick="alertFilename()" value="alert" />
</form>
</body>
</html>
Je vais répondre à cette question via Javascript simple pris en charge par tous les navigateurs que j'ai testés jusqu'à présent (IE8 à IE11, Chrome, FF etc).
Voici le code.
function GetFileSizeNameAndType()
{
var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.
var totalFileSize = 0;
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0)
{
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++)
{
//ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
var fsize = fi.files.item(i).size;
totalFileSize = totalFileSize + fsize;
document.getElementById('fp').innerHTML =
document.getElementById('fp').innerHTML
+
'<br /> ' + 'File Name is <b>' + fi.files.item(i).name
+
'</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
+
'</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
}
}
document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
} <p>
<input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
</p>
<div id="fp"></div>
<p>
<div id="divTotalSize"></div>
</p>* Veuillez noter que nous affichons la taille du fichier en Ko (kilo-octets). Pour entrer en Mo, divisez par 1024 * 1024 et ainsi de suite *.
Il effectuera des sorties de fichier comme celles-ci en sélectionnant 