web-dev-qa-db-fra.com

javascript - récupère le nom de fichier et l'extension depuis input type = file

J'ai une entrée de téléchargement de fichier et lorsque je clique sur le bouton Parcourir et sélectionne le fichier, je veux que le nom de fichier et l'extension apparaissent dans deux zones de texte d'entrée (voir l'exemple de code). Cela fonctionne correctement avec l'extension, mais le nom de fichier montre également le chemin qui me donne l'avertissement fakepath. Je comprends pourquoi, mais quelle est la bonne façon de le faire et de simplement mettre le nom de fichier dans cette boîte. Je n'ai pas besoin du chemin.

function getoutput(){
    outputfile.value=inputfile.value.split('.')[0];
    extension.value=inputfile.value.split('.')[1];}
    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>
javascripthtmlformsfile-uploadinput
8
CheeseFlavored

Utilisez lastIndexOf pour obtenir le dernier \ comme index et utilisez substr pour obtenir la chaîne restante à partir du dernier index de \

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }
<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

[~ # ~] mise à jour [~ # ~] 

function getoutput(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}
<input id='inputfile' type='file' name='inputfile' onChange='getoutput(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>
14
Junius L.

C'est un peu vieux post ... juste pour info

   var files = event.target.files
   var filename = files[0].name
   var extension = files[0].type

Dans le type, vous trouverez l'extension pour, par exemple: s'il s'agit d'une image jpeg,

extension = image/jpeg

ou si pdf alors,

extension = application/pdf

Pour obtenir la valeur exacte, exécutez extension.replace (/// g, ''). vous obtiendrez la valeur.

14
Dhatri Suresh
var filePath = $("#inputFile").val(); 
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);

Cela fonctionnera si vous avez des points dans le nom de fichier.

4
Poorna

Vous pouvez essayer ceci:

var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`

Cela devrait supprimer tout sauf le nom de fichier.

Je l'ai obtenu de Comment obtenir le nom de fichier à partir d'un chemin complet en utilisant JavaScript? .

2
Valentin Gavran

Obtenez d'abord le nom de fichier, puis découpez-le en différentes parties.

const media_file = event.target.files[0] // event is from the <input> event
const filename = media_file.name

let last_dot = filename.lastIndexOf('.')
let ext = filename.slice(last_dot + 1)
let name = filename.slice(0, last_dot)
1
chidimo

à partir du fichier [0] .type, vous pouvez obtenir l'extension

le fichier [0] ressemble au fichier {nom: "hcl_icon.ico", lastModified: 1559301004000, webkitRelativePath: "", taille: 1150, tapez: "image/x-icon"}

ou par File reader reader.onload = function (e) {} e.target.result donne le src du fichier contient Les données ont l'extension

0
Rashmi HazeL ivy DorisFay

Simple et rapide.

   var files = event.target.files[0]
   // for getting only extension 
   var fileExtension = files.type.split("/").pop();
   var fileName = files.name
0
Salman Mehmood

Voici un code pratique.

    String extension = fileName.substring(fileName.lastIndexOf('.')+1);
    String name = fileName.substring(0, fileName.lastIndexOf('.'));
0
Remario