Obtenha o tamanho do arquivo antes de enviar


89

Existe alguma maneira de descobrir o tamanho do arquivo antes de enviar o arquivo usando AJAX / PHP em caso de alteração do arquivo de entrada?




Aqui está um tutorial passo a passo para obter o nome, tipo e tamanho do arquivo codepedia.info/…
Satinder singh

Respostas:


132

Para o HTML abaixo

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

tente o seguinte:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Veja o seguinte tópico:

Como verificar o tamanho de entrada do arquivo com jQuery?


1
A matriz de arquivos não existe no Internet Explorer (versões mais antigas)?
Tiago César Oliveira

4
Sim, isso não funciona antes do IE 10 e só tem suporte parcial no Android e iOS. caniuse.com/fileapi . Se fosse assim tão fácil ...
styks

2
Suponho que o resultado esteja em bytes.
Erdal G.

4
@ErdalG. Boa pergunta! MDN está faltando a documentação, mas FileList.filesé um array-like de Fileobjetos, que é uma extensão do Glob. E de acordo com as especificações , Globrealmente define a sizepropriedade como o número de bytes (0 para um arquivo vazio). Então, sim, o resultado está em bytes .
John Weisz

14
<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Trabalhe no IE e FF


15
voto negativo porque a resposta usa ActiveX. em 2015, até a Microsoft está abandonando o ActiveX. Embora tenha sido uma sugestão razoável quando dada, eu recomendaria aos desenvolvedores evitar isso agora e no futuro.
scott stone

3
Eu gosto desta solução, porque apenas as versões mais antigas do IE retornarão true para window.ActiveXObject.
Rob Breidecker

@scottstone Não entendo por que você votou negativamente em todas as respostas que oferecem suporte a navegadores legados. Esta resposta é muito mais clara do que aquelas que usam as impressões digitais do navegador e de forma alguma recomendam que ninguém use ActiveX.
Nicolas Bouvrette

@NicolasBouvrette - Concordo que esta resposta é muito mais limpa do que as outras, mas não posso remover o downvote neste momento. A pergunta original não pedia compatibilidade com versões antigas do IE, e essa resposta não informa aos leitores que a maior parte do código existe para oferecer suporte a versões do IE com mais de 5 anos.
scott stone

@scottstone Na verdade, mais um ponto tangível da minha opinião sobre por que não usar ActiveX é porque ele exibe uma mensagem de aviso no IE, que é uma experiência de usuário horrível (assustadora?).
Nicolas Bouvrette

13

Aqui está um exemplo simples de como obter o tamanho de um arquivo antes de enviá-lo. Ele está usando jQuery para detectar quando o conteúdo é adicionado ou alterado, mas você ainda pode obter files[0].sizesem usar jQuery.

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Aqui está um exemplo mais completo, algum código de prova de conceito para arrastar e soltar arquivos em FormData e fazer upload via POST para um servidor. Inclui uma verificação simples do tamanho do arquivo.


8

Eu tive o mesmo problema e parece que não tivemos uma solução precisa. Espero que isso possa ajudar outras pessoas.

Depois de explorar a região, finalmente encontrei a resposta. Este é o meu código para obter o arquivo anexado com jQuery:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

Este é apenas o código de exemplo para obter o tamanho do arquivo. Se você quiser fazer outras coisas, sinta-se à vontade para alterar o código para satisfazer suas necessidades.


Eu gosto deste porque não precisa ser colocado no evento de mudança como a solução mais popular. E também gosto do fato de você ter me dado permissão para alterar o código para satisfazer minhas necessidades :)
Matt,

8

Melhor solução funcionando em todos os navegadores;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

de http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

ATUALIZAÇÃO: usaremos esta função para verificar se é o navegador IE ou não

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}

3
voto negativo porque a resposta usa ActiveX. em 2015, até a Microsoft está abandonando o ActiveX. Embora tenha sido uma sugestão razoável quando dada, eu recomendaria aos desenvolvedores evitar isso agora e no futuro. -
scott stone

1
$ .browser foi removido do jQuery na versão 1.9 (obsoleto desde v 1.3).
Silvio Delgado

2
@scottstone isso é para compatibilidade com versões anteriores e isso não é verdade. A Microsoft não abandonará o ActiveX, ele é muito usado em muitas coisas e aqui está a prova computerworld.com/article/2481188/internet/…
ucefkh

@SilvioDelgado Alterado e atualizado, eles removeram $ .browser em um plugin, então vamos precisar apenas de um pequeno teste para o navegador IE (funciona com todas as versões)
ucefkh

4

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>


3

Navegadores com suporte a HTML5 possuem propriedades de arquivos para o tipo de entrada. É claro que isso não funcionará em versões mais antigas do IE.

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}

2

A solução de ucefkh funcionou melhor, mas como $ .browser foi descontinuado no jQuery 1.91, ele teve que mudar para usar navigator.userAgent:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

1

você precisa fazer uma solicitação HEAD ajax para obter o tamanho do arquivo. com jquery é algo assim

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Mas se isso acontecer, a entrada do arquivo será limpa (vazia) ?? Você pode dar um exemplo, agradecer
DeLe

1

Não use, ActiveXpois há chances de ele exibir uma mensagem de aviso assustadora no Internet Explorer e assustar seus usuários.

Aviso de ActiveX

Se alguém quiser implementar essa verificação, deve contar apenas com o objeto FileList disponível em navegadores modernos e com verificações do lado do servidor apenas para navegadores mais antigos ( aprimoramento progressivo ).

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}

0

Você pode usar a função de tamanho de arquivo PHP. Durante o upload usando ajax, verifique o tamanho do arquivo primeiro fazendo uma solicitação ajax para um script php que verifica o tamanho do arquivo e retorna o valor.



0

Pessoalmente, eu diria que a resposta da Web World é a melhor hoje, dados os padrões HTML. Se você precisar oferecer suporte ao IE <10, precisará usar alguma forma de ActiveX. Eu evitaria as recomendações que envolvem codificação contra Scripting.FileSystemObject ou instanciar ActiveX diretamente.

Nesse caso, tive sucesso usando bibliotecas JS de terceiros, como plupload, que pode ser configurada para usar apis HTML5 ou controles Flash / Silverlight para preencher navegadores que não os suportam. Plupload tem uma API do lado do cliente para verificar o tamanho do arquivo que funciona no IE <10.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.