Javascript - Como extrair nome do arquivo a partir de um controle de entrada de arquivo

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

  •  21-08-2019
  •  | 
  •  

Pergunta

Quando um usuário seleciona um arquivo em uma página da web que eu quero ser capaz de extrair apenas o nome do arquivo.

Eu tentei função str.search mas parece falhar quando o nome do arquivo é algo como isto: c:. \ Uploads \ ilike.this.file.jpg

Como podemos extrair apenas o nome do arquivo sem extensão?

Foi útil?

Solução

Assumindo que o seu tem um id de Enviar isso deve esperamos fazer o truque: 

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

Outras dicas

Para dividir a string ({filepath} / {filename}) e obter o nome do arquivo que você poderia usar algo como isto: 

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

"O método pop remove o último elemento de uma matriz e retorna esse valor para o chamador ". Mozilla Developer Network

Exemplo:

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

você obtém: "file.txt"

Hoje em dia há uma maneira muito mais simples: 

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

Muito simples 

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

Assumindo: 

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

O JavaScript seria: 

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

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

Eu só fiz a minha própria versão deste. Minha função pode ser usada para extrair o que quiser com ele, se você não precisa de tudo isso, então você pode facilmente remover algum 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>

saída será o seguinte:

  • arquivo com nome 'TestCase1' tem extensão: 'jpeg' é no diretório: 'C: \ blabla \ blaeobuaeu'
  • arquivo com nome 'testcase2' tem extensão: 'png' é no diretório: / tmp / blabla '
  • arquivo com nome 'testcase3' tem extensão: 'htm' é no diretório: ''
  • Diretório com o nome 'Testcase4' tem extensão: '' é no diretório: 'C:'
  • Diretório com o nome fileWithoutDots 'tem extensão: '' é no diretório: '/dir.with.dots'
  • Diretório com o nome '' tem extensão: '' é no diretório: '/dir.with.dots/another.dir'

Com && nOffset+1 === str.length adicionado ao isDirectory:

  • arquivo com nome 'TestCase1' tem extensão: 'jpeg' é no diretório: 'C: \ blabla \ blaeobuaeu'
  • arquivo com nome 'testcase2' tem extensão: 'png' é no diretório: / tmp / blabla '
  • arquivo com nome 'testcase3' tem extensão: 'htm' é no diretório: ''
  • Diretório com o nome 'Testcase4' tem extensão: '' é no diretório: 'C:'
  • Diretório com o nome fileWithoutDots 'tem extensão: '' é no diretório: '/dir.with.dots'
  • Diretório com o nome '' tem extensão: '' é no diretório: '/dir.with.dots/another.dir'

Tendo em conta os casos de teste que você pode ver esta função funciona muito robusta em comparação com os outros métodos aqui proposto.

Nota para iniciantes sobre o \\: \ é um caractere de escape, por exemplo \ n significa uma nova linha e \ t uma guia. Para torná-lo possível escrever \ n, você deve realmente digitar \\ n.

Eu suponho que você quer retirar todas as extensões, ou seja /tmp/test/somefile.tar.gz para somefile.

abordagem direta com o regex: 

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

abordagem alternativa com operação regex e array: 

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

Input : C:\path\Filename.ext
saída : Filename

código Em HTML, defina o valor onChange arquivo como este ... 

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

Assumindo que o seu ID de campo de texto é '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>

Nenhuma das respostas altamente upvoted realmente fornecer "apenas o nome do arquivo sem extensão" e as outras soluções são maneira muito código para um trabalho tão simples.

Eu acho que isso deve ser um one-liner para qualquer programador JavaScript. É uma expressão regular muito simples: 

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

Primeiro, tira qualquer coisa até a última barra, se presente.

Em seguida, tira nada depois do último período, se presente.

É simples, é robusto, ele implementa exatamente o que está pediu. Estou faltando alguma coisa? 

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

Como remover a extensão

Nenhuma das respostas acima funcionou para mim, aqui é a minha solução que atualiza uma entrada desativada com o nome do arquivo: 

<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 você estiver usando jQuery, em seguida, 

$("#fileupload").val();
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top