Javascript - Come estrarre il nome del file da un controllo di input di file

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

Domanda

Quando un utente seleziona un file in una pagina web che voglio essere in grado di estrarre solo il nome del file.

Ho provato la funzione str.search ma sembra venire a mancare quando il nome del file è qualcosa di simile: c:. \ Uploads \ ilike.this.file.jpg

Come si può estrarre solo il nome del file senza estensione?

È stato utile?

Soluzione

Assumendo che il ha un ID di Carica questo dovrebbe auspicabilmente fare il trucco: 

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}

Altri suggerimenti

Per dividere la stringa ({filepath} / {filename}) e ottenere il nome del file che si potrebbe usare qualcosa di simile a questo: 

str.split(/(\\|\/)/g).pop()
  

"Il metodo pop rimuove l'ultimo elemento di un array e restituisce che   il valore al chiamante."    MOZILLA Developer Network

Esempio:

Da: "/home/user/file.txt".split(/(\\|\/)/g).pop()

si ottiene: "file.txt"

Al giorno d'oggi c'è un modo molto più semplice: 

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;

Molto semplice 

let file = $("#fileupload")[0].files[0]; 
file.name

Supponendo che: 

<input type="file" name="file1" id="theFile">

Il codice JavaScript potrebbe essere: 

var fileName = document.getElementById('theFile').files[0].name;

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];

Ho appena fatto la mia versione di questo. La mia funzione può essere utilizzata per estrarre quello che vuoi da esso, se non hai bisogno di tutto questo, allora si può facilmente rimuovere alcuni codice. 

<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
    var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
    var eOffset = str.lastIndexOf('.');
    if(eOffset < 0 && eOffset < nOffset)
    {
        eOffset = str.length;
    }
    return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
            path: str.substring(0, nOffset),
            name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
            extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}

// Testing the function
var testcases = [
    "C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
    "/tmp/blabla/testcase2.png",
    "testcase3.htm",
    "C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
    "/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
    var file = pathToFile(testcases[i]);
    document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>

output sarà il seguente:

  • File con il nome di 'testcase1' ha estensione: 'jpeg' si trova nella directory: 'C: \ blabla \ blaeobuaeu'
  • File con il nome di 'testcase2' ha estensione: 'png' è nella directory: '/ tmp / blabla'
  • File con il nome di 'testcase3' ha estensione: 'htm' è nella directory: ''
  • Directory con nome 'Testcase4' ha estensione: '' è nella directory: 'C:'
  • Directory con 'fileWithoutDots' nome ha l'estensione: '' è nella directory: '/dir.with.dots'
  • Directory con nome '' ha estensione: '' è nella directory: '/dir.with.dots/another.dir'

Con && nOffset+1 === str.length aggiunto al isDirectory:

  • File con il nome di 'testcase1' ha estensione: 'jpeg' si trova nella directory: 'C: \ blabla \ blaeobuaeu'
  • File con il nome di 'testcase2' ha estensione: 'png' è nella directory: '/ tmp / blabla'
  • File con il nome di 'testcase3' ha estensione: 'htm' è nella directory: ''
  • Directory con nome 'Testcase4' ha estensione: '' è nella directory: 'C:'
  • Directory con 'fileWithoutDots' nome ha l'estensione: '' è nella directory: '/dir.with.dots'
  • Directory con nome '' ha estensione: '' è nella directory: '/dir.with.dots/another.dir'

Dati i casi di test si può vedere questa funzione funziona abbastanza robusto rispetto agli altri metodi proposti qui.

Si noti per i neofiti circa il \\: \ è un carattere di escape, ad esempio \ n significa una nuova riga e \ t una scheda. Per rendere possibile scrivere \ n, è necessario in realtà digitare \\ n.

Presumo che si desidera mettere a nudo tutte le estensioni, ossia /tmp/test/somefile.tar.gz a somefile.

approccio diretto con regex: 

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

Approccio alternativo con espressioni regolari e la matrice di funzionamento: 

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];

ingresso : C:\path\Filename.ext
Output : Filename

Nel codice HTML, impostare il file onChange valore come questo ... 

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>

Assumendo che il campo di testo ID è 'wpName' ... 

<input type="text" name="wpName" id="wpName">

JavaScript 

<script>
  function setfilename(val)
  {
    filename = val.split('\\').pop().split('/').pop();
    filename = filename.substring(0, filename.lastIndexOf('.'));
    document.getElementById('wpName').value = filename;
  }
</script>

Nessuna delle risposte altamente upvoted effettivamente fornire "solo il nome del file senza estensione" e le altre soluzioni sono modo troppo codice per un lavoro così semplice.

Credo che questo dovrebbe essere un one-liner per qualsiasi programmatore JavaScript. E 'molto semplice espressione regolare: 

function basename(prevname) {
    return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}

In primo luogo, striscia nulla fino all'ultimo barra, se presente.

Poi, striscia nulla dopo l'ultimo periodo, se presente.

E 'semplice, è robusto, implementa esattamente ciò che è chiesto. Mi sto perdendo qualcosa? 

// HTML
<input type="file" onchange="getFileName(this)">

// JS
function getFileName(input) {
    console.log(input.files[0].name) // With extension
    console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}

Come rimuovere l'estensione

Nessuna delle risposte sopra funzionato per me, ecco la mia soluzione che aggiorna un ingresso disabile con il nome del file: 

<script type="text/javascript"> 
  document.getElementById('img_name').onchange = function () {
  var filePath = this.value;
    if (filePath) {
      var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
      document.getElementById('img_name_input').value = fileName;
    }
  };
</script>

Se si sta utilizzando jQuery quindi 

$("#fileupload").val();
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top