Javascript - Cómo extraer el nombre de archivo de un control de entrada de archivo

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

  •  21-08-2019
  •  | 
  •  

Pregunta

Cuando un usuario selecciona un archivo en una página web que quiero ser capaz de extraer sólo el nombre de archivo.

Yo probé función str.search pero parece fallar cuando el nombre del archivo es algo como esto: c:. \ Archivos \ ilike.this.file.jpg

¿Cómo podemos extraer sólo el nombre de archivo sin extensión?

¿Fue útil?

Solución

Asumiendo que su tiene un id de Subir Esto debería hacer el truco: 

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);
}

Otros consejos

Para dividir la cadena ({filepath} / {nombre del archivo}) y obtener el nombre del archivo que podría utilizar algo como esto: 

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

"El método pop elimina el último elemento de una matriz y devuelve que   valor a la persona que llama ".    Mozilla Developer Network

Ejemplo:

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

que se obtiene: "file.txt"

Hoy en día hay una manera mucho más simple: 

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

Muy simple 

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

Suponiendo: 

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

El JavaScript sería: 

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

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

acabo de hacer mi propia versión de este. Mi función se puede utilizar para extraer lo que quieras de él, si no necesita toda ella, entonces se puede quitar fácilmente algo de 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>

salida será el siguiente:

  • del archivo con el nombre 'testcase1' tiene la extensión: 'jpeg' es en el directorio: 'C: \ blabla \ blaeobuaeu'
  • del archivo con el nombre 'testcase2' tiene extensión: 'png' es en el directorio: '/ tmp / blabla'
  • del archivo con el nombre 'testcase3' tiene la extensión: 'htm' está en el directorio: ''
  • Directorio con el nombre de 'Testcase4' tiene extensión: '' es en el directorio: 'C:'
  • Directorio con fileWithoutDots '' nombre tiene la extensión: '' es en el directorio: '' /dir.with.dots
  • Directorio con el nombre de '' tiene extensión: '' es en el directorio: '/dir.with.dots/another.dir'

Con && nOffset+1 === str.length añadido a isDirectory:

  • del archivo con el nombre 'testcase1' tiene la extensión: 'jpeg' es en el directorio: 'C: \ blabla \ blaeobuaeu'
  • del archivo con el nombre 'testcase2' tiene extensión: 'png' es en el directorio: '/ tmp / blabla'
  • del archivo con el nombre 'testcase3' tiene la extensión: 'htm' está en el directorio: ''
  • Directorio con el nombre de 'Testcase4' tiene extensión: '' es en el directorio: 'C:'
  • Directorio con fileWithoutDots '' nombre tiene la extensión: '' es en el directorio: '' /dir.with.dots
  • Directorio con el nombre de '' tiene extensión: '' es en el directorio: '/dir.with.dots/another.dir'

Teniendo en cuenta los casos de prueba se puede ver esta función funciona bastante robusta en comparación con los otros métodos propuestos aquí.

Nota para los novatos sobre el \\: \ es un carácter de escape, por ejemplo \ n significa un salto de línea y \ t una ficha. Para que sea posible escribir \ n, en realidad se debe escribir \\ n.

Asumo que desea quitar todas las extensiones, es decir /tmp/test/somefile.tar.gz a somefile.

enfoque directo con expresiones regulares: 

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

enfoque alternativo con la operación de expresiones regulares y matriz: 

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

entrada : C:\path\Filename.ext
salida : Filename

En el código HTML, establecer el archivo onChange valor como este ... 

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

Asumiendo que su Identificación del campo de texto se '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 upvoted realidad proporcionan "sólo el nombre del archivo sin la extensión" y las otras soluciones son demasiado código para un trabajo tan simple.

Creo que esto debería ser una sola línea a cualquier programador JavaScript. Es un muy simple expresión regular: 

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

En primer lugar, la tira nada hasta la última barra, si está presente.

A continuación, la tira nada después del último período, si está presente.

Es muy sencillo, es robusta, se implementa exactamente lo que se le pide. Me estoy perdiendo 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
}

Cómo quitar la extensión

Ninguna de las respuestas anteriores trabajado para mí, aquí está mi solución, que actualiza una entrada bloqueada 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();
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top