Javascript - Wie Dateinamen aus einer Datei Eingabesteuerung extrahieren

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

  •  21-08-2019
  •  | 
  •  

Frage

Wenn ein Benutzer eine Datei auf einer Webseite auswählt, ich möchte in der Lage sein, nur die Dateinamen zu extrahieren.

habe ich str.search Funktion versuchen, aber es scheint zu scheitern, wenn der Dateiname so etwas wie diese: c:. \ Uploads \ ilike.this.file.jpg

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

War es hilfreich?

Lösung

Angenommen, Ihre hat eine ID von Hochladen sollte dies 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);
}

Andere Tipps

die Zeichenfolge nach Split ({filepath} / {Dateiname}) und erhalten die Dateinamen so etwas wie diese verwenden: 

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

"Die Pop-Methode entfernt das letzte Element aus einem Array und gibt, dass   Wert für den Anrufer.“    MOZILLA DEVELOPER NETWORK

Beispiel:

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

Sie erhalten: "file.txt"

Heutzutage gibt es eine viel einfachere Art und Weise: 

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

Sehr einfach 

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

Unter der Annahme: 

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

Der JavaScript wäre: 

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

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

Ich habe gerade meine eigene Version davon. Meine Funktion verwendet werden kann, zu extrahieren, was Sie von ihm wollen, wenn Sie alle brauchen es nicht, dann können Sie ganz einfach einen 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>

Will Ausgang der folgende:

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

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

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

, um die Testfälle Bei dieser Funktion sehen können zu den anderen vorgeschlagenen Methoden hier recht robust gegen funktioniert.

Hinweis für Anfänger über die \\: \ ist ein Escape-Zeichen, zum Beispiel \ n bedeutet eine neue Zeile und \ t eine Registerkarte. Um es möglich \ n zu schreiben, müssen Sie \\ n tatsächlich geben.

Ich nehme an, Sie wollen alle Erweiterungen abzustreifen, das heißt /tmp/test/somefile.tar.gz somefile.

Direkt Ansatz mit regex: 

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

Alternative Ansatz mit regex und Array-Betrieb: 

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

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

In HTML Code die Datei onChange Wert wie folgt ... 

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

Angenommen, Ihr Textfeld 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>

Keine der hoch upvoted Antworten tatsächlich bieten „nur den Dateinamen ohne die Erweiterung“ und die anderen Lösungen sind viel zu viel Code für eine solche einfache Aufgabe.

Ich denke, das ein Einzeiler eines JavaScript-Programmierer sein sollte. Es ist ein sehr einfacher regulärer Ausdruck: 

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

Als erstes Streife alles bis zum letzten Schrägstrich, falls vorhanden.

Dann alles nach der letzten Periode Streifen, falls vorhanden.

Es ist einfach, es ist robust, es setzt genau das, was gefragt ist. Bin ich etwas fehlt? 

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

Wie die Erweiterung entfernen

Keine der oben genannten Antworten für mich gearbeitet, hier ist meine Lösung, die einen behinderten Eingang 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>

Wenn Sie mit jQuery dann 

$("#fileupload").val();
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top