wake-up-neo.com

Javascript - So extrahieren Sie den Dateinamen aus einer Dateieingabesteuerung

Wenn ein Benutzer eine Datei auf einer Webseite auswählt, möchte ich nur den Dateinamen extrahieren können.

Ich habe die str.search-Funktion ausprobiert, aber es scheint fehlzuschlagen, wenn der Dateiname ungefähr wie folgt lautet: c:\uploads\ilike.this.file.jpg .

Wie können wir nur den Dateinamen ohne Erweiterung extrahieren?

javascriptbrowserextract
95
Yogi Yang 007

Angenommen, Ihre <input type = "file"> hat eine ID von upload dies sollte hoffentlich den Trick tun:

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);
}
104
Ian Oxley

Um die Zeichenfolge ({Dateipfad}/{Dateiname}) zu teilen und den Dateinamen abzurufen, können Sie etwa Folgendes verwenden:

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

Msgstr "Die pop - Methode entfernt das letzte Element aus einem Array und gibt diesen Wert an den Aufrufer zurück.". MOZILLA-ENTWICKLER-NETZWERK

Beispiel:

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

sie erhalten: "file.txt"

169
VallaDanger

Heutzutage gibt es einen viel einfacheren Weg:

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

Sehr einfach 

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

Vorausgesetzt:

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

Das JavaScript wäre:

var fileName = document.getElementById('theFile').files[0].name;
9
Xedret
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
7
TM.

Ich habe gerade meine eigene Version davon gemacht. Meine Funktion kann verwendet werden, um das zu extrahieren, was Sie möchten. Wenn Sie nicht alles benötigen, können Sie leicht Code entfernen.

<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>

Wird folgendes ausgeben:

  • Datei mit dem Namen 'testcase1' hat die Erweiterung: 'jpeg' befindet sich im Verzeichnis: 'C:\blabla\blaeobuaeu'
  • Datei mit dem Namen 'testcase2' hat die Erweiterung: 'png' befindet sich im Verzeichnis: '/ tmp/blabla'
  • Datei mit dem Namen 'testcase3' hat die Erweiterung: 'htm' befindet sich im Verzeichnis: ''
  • Das Verzeichnis mit dem Namen 'Testcase4' hat die Erweiterung: '' befindet sich im Verzeichnis: 'C:'
  • Das Verzeichnis mit dem Namen 'fileWithoutDots' hat die Erweiterung: '' befindet sich im Verzeichnis: '/dir.with.dots'
  • Das Verzeichnis mit dem Namen '' hat die Erweiterung: '' befindet sich im Verzeichnis: '/dir.with.dots/another.dir'

Wenn && nOffset+1 === str.length zu isDirectory hinzugefügt wurde:

  • Datei mit dem Namen 'testcase1' hat die Erweiterung: 'jpeg' befindet sich im Verzeichnis: 'C:\blabla\blaeobuaeu'
  • Datei mit dem Namen 'testcase2' hat die Erweiterung: 'png' befindet sich im Verzeichnis: '/ tmp/blabla'
  • Datei mit dem Namen 'testcase3' hat die Erweiterung: 'htm' befindet sich im Verzeichnis: ''
  • Das Verzeichnis mit dem Namen 'Testcase4' hat die Erweiterung: '' befindet sich im Verzeichnis: 'C:'
  • Das Verzeichnis mit dem Namen 'fileWithoutDots' hat die Erweiterung: '' befindet sich im Verzeichnis: '/dir.with.dots'
  • Das Verzeichnis mit dem Namen '' hat die Erweiterung: '' befindet sich im Verzeichnis: '/dir.with.dots/another.dir'

Anhand der Testfälle sieht man, dass diese Funktion im Vergleich zu den anderen hier vorgeschlagenen Methoden recht robust ist.

Hinweis für Neueinsteiger über das \\:\ist ein Escape-Zeichen.\N bedeutet zum Beispiel eine Newline und\t eine Registerkarte. Um das Schreiben von\n zu ermöglichen, müssen Sie \\ n eingeben.

4
Yeti

Ich gehe davon aus, dass Sie alle Erweiterungen entfernen möchten, d. H. /tmp/test/somefile.tar.gz in somefile.

Direkter Ansatz mit Regex:

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

Alternativer Ansatz mit Regex- und Array-Operation:

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

Eingabe: C:\path\Filename.ext
Ausgabe: Filename

Legen Sie im HTML-Code den Wert der Datei onChange so fest ...

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

Angenommen, Ihre Textfeld-ID lautet '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>
2
D T
// 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
}

So entfernen Sie die Erweiterung

1
Mikel

Keine der hochbewerteten Antworten liefert tatsächlich "nur den Dateinamen ohne Erweiterung" und die anderen Lösungen sind viel zu viel Code für eine so einfache Aufgabe.

Ich denke, dies sollte ein Einzeiler für jeden JavaScript-Programmierer sein. Es ist ein sehr einfacher regulärer Ausdruck:

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

Streifen Sie zunächst alles bis zum letzten Schrägstrich ab, falls vorhanden.

Dann entfernen Sie alles nach der letzten Periode, falls vorhanden.

Es ist einfach, robust und implementiert genau das, was verlangt wird. Fehlt mir etwas?

1
Jon Watte

Wenn Sie jQuery verwenden, dann 

$("#fileupload").val();
0
Rajat Bansal

Keine der obigen Antworten funktionierte für mich, hier ist meine Lösung, die eine deaktivierte Eingabe mit dem Dateinamen aktualisiert:

<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>
0
sigi