Wenn ein Benutzer eine Datei auf einer Webseite auswählt, möchte ich nur den Dateinamen extrahieren können.
Ich habe die Funktion str.search ausprobiert, aber es scheint fehlzuschlagen, wenn der Dateiname ungefähr so lautet: c: \ uploads \ ilike.this.file.jpg .
Wie können wir nur den Dateinamen ohne Erweiterung extrahieren?
Antworten:
Angenommen, Ihre <input type = "file"> hat eine ID zum 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);
}filename = filename.substring(0, filename.lastIndexOf('.'));Weil sein Weg mit Erweiterungen von mehr als 3 Zeichen fehlschlägt, also: .html, .jpeg usw.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Um die Zeichenfolge ({Dateipfad} / {Dateiname}) zu teilen und den Dateinamen abzurufen, können Sie Folgendes verwenden:
str.split(/(\\|\/)/g).pop()"Die Pop-Methode entfernt das letzte Element aus einem Array und gibt diesen Wert an den Aufrufer zurück."
Mozilla Developer Network
Beispiel:
von: "/home/user/file.txt".split(/(\\|\/)/g).pop()
du erhältst: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. Darüber hinaus wurde auch darum gebeten, die Dateierweiterung zu entfernen. Eine vollständige Lösung finden Sie unter : stackoverflow.com/a/32156800/19163
Heutzutage gibt es einen viel einfacheren Weg:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthvor dem Anruf .name, ob der Benutzer auf Abbrechen geklickt hat.
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Ich gehe davon aus, dass Sie alle Erweiterungen entfernen möchten, dh /tmp/test/somefile.tar.gzbissomefile .
Direkter Ansatz mit Regex:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Alternativer Ansatz mit Regex- und Array-Operation:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Ich habe gerade meine eigene Version davon gemacht. Meine Funktion kann verwendet werden, um alles zu extrahieren, was Sie wollen. Wenn Sie nicht alles benötigen, können Sie einfach 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>Gibt Folgendes aus:
Mit && nOffset+1 === str.lengthhinzugefügt zu isDirectory:
In Anbetracht der Testfälle können Sie sehen, dass diese Funktion im Vergleich zu den anderen hier vorgeschlagenen Methoden recht robust funktioniert.
Hinweis für Neulinge, dass \\: \ ein Escape-Zeichen ist, z. B. \ n bedeutet eine neue Zeile und eine \ ta-Registerkarte. Um das Schreiben von \ n zu ermöglichen, müssen Sie tatsächlich \\ n eingeben.
&& eOffset < nOffset).
Eingabe : C:\path\Filename.ext
Ausgabe :Filename
Stellen Sie im HTML-Code den onChangeWert für " Datei" wie folgt ein ...
<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>Keine der hoch bewerteten Antworten enthält tatsächlich "nur den Dateinamen ohne Erweiterung", und die anderen Lösungen sind viel zu viel Code für einen so einfachen Job.
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(/(\.[^.]*)$/, '');
}Entfernen Sie zuerst alles bis zum letzten Schrägstrich, falls vorhanden.
Ziehen Sie dann nach der letzten Periode etwas aus, falls vorhanden.
Es ist einfach, es ist robust, es implementiert genau das, was verlangt wird. Vermisse ich etwas
// 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
}Keine der oben genannten Antworten hat bei mir funktioniert. 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>Wenn Sie dann jQuery verwenden
$("#fileupload").val();