Quando un utente seleziona un file in una pagina web, voglio essere in grado di estrarre solo il nome del file.
Ho provato la funzione str.search ma sembra fallire quando il nome del file è qualcosa del genere: c: \ uploads \ ilike.this.file.jpg .
Come possiamo estrarre solo il nome del file senza estensione?
Risposte:
Supponendo che il tuo <input type = "file"> abbia un ID di caricamento, si spera che questo dovrebbe 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);
}filename = filename.substring(0, filename.lastIndexOf('.'));Perché il suo metodo fallirà con estensioni di più caratteri di 3, quindi: .html, .jpeg ecc.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Per dividere la stringa ({filepath} / {filename}) e ottenere il nome del file potresti usare qualcosa del genere:
str.split(/(\\|\/)/g).pop()"Il metodo pop rimuove l'ultimo elemento da un array e restituisce quel valore al chiamante."
Mozilla Developer Network
Esempio:
a partire dal: "/home/user/file.txt".split(/(\\|\/)/g).pop()
ottieni: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. Inoltre, è stato chiesto di rimuovere anche l'estensione del file. Per una soluzione completa, vedere: stackoverflow.com/a/32156800/19163
Al giorno d'oggi c'è un modo molto più semplice:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthprima di chiamare .name, nel caso in cui l'utente abbia cliccato su Annulla.
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Presumo che tu voglia rimuovere tutte le estensioni, cioè /tmp/test/somefile.tar.gzasomefile .
Approccio diretto con regex:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Approccio alternativo con regex e operazione su array:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Ho appena creato la mia versione di questo. La mia funzione può essere utilizzata per estrarre tutto ciò che vuoi da esso, se non ti serve tutto, puoi rimuovere facilmente del 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>Produrrà quanto segue:
Con && nOffset+1 === str.lengthaggiunto a isDirectory:
Dati i casi di test, puoi vedere che questa funzione funziona in modo abbastanza robusto rispetto agli altri metodi proposti qui.
Nota per i neofiti sul \\: \ è un carattere di escape, ad esempio \ n indica una nuova riga e una scheda \ ta. Per rendere possibile scrivere \ n, devi effettivamente digitare \\ n.
&& eOffset < nOffset).
Ingresso : C:\path\Filename.ext
Uscita :Filename
Nel codice HTML, imposta il onChangevalore File in questo modo ...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>Supponendo che l'ID del campo di testo sia "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 votate fornisce in realtà "solo il nome del file senza estensione" e le altre soluzioni sono troppo codice per un lavoro così semplice.
Penso che questo dovrebbe essere un insegnamento per qualsiasi programmatore JavaScript. È un'espressione regolare molto semplice:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}Per prima cosa, spoglia qualsiasi cosa fino all'ultima barra, se presente.
Quindi, spoglia tutto dopo l'ultima mestruazione, se presente.
È semplice, è robusto, implementa esattamente ciò che viene richiesto. 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
}Nessuna delle risposte precedenti ha funzionato per me, ecco la mia soluzione che aggiorna un input disabilitato 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 stai usando jQuery allora
$("#fileupload").val();