jQuery: obtenha o nome do arquivo selecionado em <input type = “file” />

90

Este código deveria funcionar no IE (nem mesmo teste no Firefox), mas não funciona. O que eu quero é exibir o nome do arquivo anexado. Qualquer ajuda?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>
jquery events copy file-io
fonte
Verifique minha resposta, acredito que é a maneira melhor e mais compreensível de se conseguir isso.
James111

Respostas:

147

É tão simples quanto escrever:

$('input[type=file]').val()

De qualquer forma, sugiro usar o atributo de nome ou ID para selecionar sua entrada. E com o evento, deve ser assim:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
Pensador
fonte
Obrigado! Isso funcionou no problema anterior (e simplificado) que eu coloquei, mas não funciona na versão estendida.
como obter o caminho completo do arquivo o código acima fornece apenas o nome do arquivo.
Khurram Ijaz
3
Padre @PHP, você não pode. Os navegadores não expõem esse tipo de informação.
zneak
2
@PHP Priest, se você pudesse fazer isso, você poderia transmitir sub-repticiamente dados sobre o sistema de arquivos do usuário via AJAX e o usuário provavelmente nunca saberia. Imagine como seria pior se você pudesse definir programaticamente o valor de uma entrada de arquivo. Sim. Problemas de segurança.
jinglesthula
1
Isso parece um pouco exagerado? A forma como listei é muito mais fácil e compreensível.
James111
20

A maneira mais simples é simplesmente usar a seguinte linha de jquery, usando isso você não entende o /fakepathabsurdo, você obtém diretamente o arquivo que foi carregado:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Alguns outros comandos úteis são:

Para obter o nome do arquivo:

$('input[type=file]')[0].files[0].name; // This gets the file name

Para obter o tipo do arquivo:

Se eu fosse fazer upload de um PNG, ele retornaria image/png

$("#imgUpload")[0].files[0].type

Para obter o tamanho (em bytes) do arquivo:

$("#imgUpload")[0].files[0].size

Além disso, você não precisa usar esses comandos on('change', você pode obter os valores a qualquer momento, por exemplo, você pode ter um upload de arquivo e quando o usuário clica upload, você simplesmente usa os comandos que listei.

James111
fonte
por que recebi um erro Não é possível ler a propriedade 'nome' de indefinido?
Gagantous
19 
$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

Este código não aparecerá C:\fakepath\antes do nome do arquivo no Google Chrome em caso de uso .val().

Anatolii Pazhyn
fonte
4 
<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>
Anil Gupta
fonte
Obrigado! Isso foi útil para obter o nome real do arquivo carregado e não o caminho completo.
Evan M
3

Eu usei o seguinte que funcionou corretamente. 

$('#fileAttached').attr('value', $('#attachment').val())
ihmar
fonte
2 
//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
quadrado vermelho
fonte
1

Adicionar um botão de redefinição oculto:

<input id="Reset1" type="reset" value="reset" class="hidden" />

Clique no botão reset para limpar a entrada.

$("#Reset1").click();
daniel ye
fonte
1
Você pode clicar em um botão oculto?
DaveWalley
-1 
<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>
Raghuraj Singh Gurjar
fonte
obrigado cara, eu estava procurando por isso eu sei que este não é o assunto, mas foi minha resposta, você sabe;)
Tarek