Cuando un usuario selecciona un archivo en una página web, quiero poder extraer solo el nombre del archivo.
Probé la función str.search pero parece fallar cuando el nombre del archivo es algo como esto: c: \ uploads \ ilike.this.file.jpg .
¿Cómo podemos extraer solo el nombre del archivo sin extensión?
Respuestas:
Suponiendo que su <input type = "file"> tiene una identificación de carga, esto debería funcionar:
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('.'));Porque su camino fallará con extensiones de más de 3 caracteres, por lo tanto: .html, .jpeg, etc.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Para dividir la cadena ({filepath} / {filename}) y obtener el nombre del archivo, puede usar algo como esto:
str.split(/(\\|\/)/g).pop()"El método pop elimina el último elemento de una matriz y devuelve ese valor a la persona que llama".
Red de desarrolladores de Mozilla
Ejemplo:
de: "/home/user/file.txt".split(/(\\|\/)/g).pop()
usted obtiene: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. Además, también se pidió eliminar la extensión del archivo. Para obtener una solución completa, consulte: stackoverflow.com/a/32156800/19163
Hoy en día existe una forma mucho más sencilla:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.length antes de llamar .name, en caso de que el usuario haya hecho clic en cancelar.
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Supongo que desea eliminar todas las extensiones, es decir, /tmp/test/somefile.tar.gza somefile.
Enfoque directo con expresiones regulares:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Enfoque alternativo con operación de expresiones regulares y matrices:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Acabo de hacer mi propia versión de esto. Mi función se puede usar para extraer lo que quieras de ella, si no la necesitas todo, puedes eliminar fácilmente algún código.
<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>Producirá lo siguiente:
Con && nOffset+1 === str.lengthagregado a isDirectory:
Dados los casos de prueba, puede ver que esta función funciona de manera bastante robusta en comparación con los otros métodos propuestos aquí.
Nota para los novatos sobre \\: \ es un carácter de escape, por ejemplo, \ n significa una nueva línea y una pestaña \ ta. Para que sea posible escribir \ n, debe escribir \\ n.
&& eOffset < nOffset).
Entrada : C:\path\Filename.ext
Salida :Filename
En código HTML, establezca el onChangevalor de Archivo así ...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>Suponiendo que su ID de campo de texto es '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>Ninguna de las respuestas altamente votadas proporciona "solo el nombre del archivo sin extensión" y las otras soluciones son demasiado código para un trabajo tan simple.
Creo que esto debería ser un ejemplo para cualquier programador de JavaScript. Es una expresión regular muy simple:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}Primero, elimine cualquier cosa hasta la última barra, si está presente.
Luego, quite cualquier cosa después del último período, si está presente.
Es simple, es robusto, implementa exactamente lo que se pide. ¿Me estoy perdiendo de algo?
// 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
}Ninguna de las respuestas anteriores funcionó para mí, aquí está mi solución que actualiza una entrada deshabilitada con el nombre de archivo:
<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>Si está utilizando jQuery entonces
$("#fileupload").val();