Obtenha o tamanho do arquivo antes de enviar

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?

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?

<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

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.

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.

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

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

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

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

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

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

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.

Você pode usar a API de arquivo HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

No entanto, você sempre deve ter um fallback para PHP (ou qualquer outra linguagem de back-end que você usa) para navegadores mais antigos.

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.