Cliente verificando o tamanho do arquivo usando HTML5?

84

Estou tentando pegar a onda do HTML5, mas estou enfrentando um pequeno problema. Antes do HTML5, checávamos o tamanho do arquivo com flash, mas agora a tendência é evitar o uso de flash em aplicativos da web. Existe alguma maneira de verificar o tamanho do arquivo no lado do cliente usando HTML5?

Khaled Musaied
fonte

Respostas:

126

Isso funciona. Coloque-o dentro de um ouvinte de evento para quando a entrada for alterada.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
Abdullah Jibaly
fonte
Funciona para mim no IE 10, Mozilla FFx e Chrome. Obrigado!
Rahnzo
funciona bem, você apenas não está usando-o corretamente; faça logon no evento onchange da entrada e você ficará bem.
dandavis
@dandavis Estou usando o código na resposta. Se o código funciona bem, por que preciso alterá-lo?
Chuck Le Butt
1
@Chuck seu exemplo não funciona porque você tenta ler a lista de arquivos no carregamento da página, antes de selecionar qualquer arquivo.
aproximadamente
1
@Chuck: ok, funciona muito bem e você colou bem, mas sozinho não é suficiente. se você o executou no console depois de preencher o arquivo, verá que está funcionando bem. para aplicativos, o console não é bom, então você deve colocar o código em um evento que é executado depois que a entrada é preenchida, para que funcione conforme o esperado. Desculpe pelo mal entendido.
dandavis
33

A resposta aceita está realmente correta, mas você precisa vinculá-la a um ouvinte de evento para que seja atualizada sempre que a entrada do arquivo for alterada.

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

Se você estiver usando a biblioteca jQuery, o código a seguir pode ser útil

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

Dado que a conversão do fileSize para exibir em qualquer métrica é com você.

Ammadu
fonte
Seu exemplo jQuery não funciona. Parece que você não consegue usar o jQuery com .files: jsfiddle.net/edxvo4wa (descobri isso sozinho quando estava criando uma solução - funciona se você mudar para document.getElementById).
Chuck Le Butt
1
@Chuck desculpe pelo erro, eu atualizei minha resposta com a que está funcionando
Ammadu
7

HTML5 fie api suporta para verificar o tamanho do arquivo.

leia este artigo para obter mais informações sobre API de arquivo

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="fileInput" />


var size = document.getElementById("fileInput").files[0].size;

da mesma forma, a API do arquivo fornece o nome e o tipo.

Konga Raju
fonte
3

Pessoalmente, eu optaria por este formato:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }
Alexander Leon
fonte
1
Acredito que 500kb seria realmente 500 * 1024. Não é grande coisa, mas o usuário final com um arquivo de 500.000b veria como 488kb e recusaria. E aqui começa a grande frustração
Apolo