Usando jQuery, restringindo o tamanho do arquivo antes de fazer o upload

No PHP, eles têm uma maneira de restringir o tamanho do arquivo APÓS o upload, mas não antes de fazer o upload. Eu uso o Malsup jQuery Form Plugin para o meu formulário de postagem, e suporta postagem de arquivo de imagem.

Eu queria saber se talvez haja uma restrição onde eu possa definir quantos bytes podem passar através desse stream AJAX até o servidor? Isso pode me permitir verificar o tamanho do arquivo e retornar um erro se o arquivo for muito grande.

Ao fazer isso no lado do cliente, ele bloqueia os novatos que tiram uma foto de 10MB de sua Pentax e tentam fazer o upload dela.

Esta é uma cópia das minhas respostas em uma pergunta muito semelhante: Como verificar o tamanho da input do arquivo com jQuery?


Na verdade, você não tem access ao sistema de arquivos (por exemplo, ler e gravar arquivos locais). No entanto, devido à especificação da API do arquivo HTML5, há algumas propriedades de arquivo às quais você tem access e o tamanho do arquivo é uma delas.

Para este HTML:

 

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

Como é parte da especificação HTML5, ele funcionará apenas para navegadores modernos (v10 necessário para o IE) e eu adicionei aqui mais detalhes e links sobre outras informações de arquivo que você deve saber: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-checking-the-file-size /


Suporte a navegadores antigos

Esteja ciente de que os navegadores antigos retornarão um valor null para a chamada this.files anterior, portanto, o access a this.files[0] gerará uma exceção e você deverá verificar o suporte da API de Arquivos antes de usá-lo.

Eu não acho que seja possível a menos que você use um flash, activex ou java uploader.

Por razões de segurança, o ajax / javascript não tem permissão para acessar o stream de arquivos ou as propriedades do arquivo antes ou durante o upload.

Eu tentei dessa maneira e estou obtendo os resultados no IE *, e o Mozilla 3.6.16, não verificou em versões mais antigas.

 

Adicione biblioteca Jquery também.

Eu encontrei o mesmo problema. Você tem que usar o ActiveX ou Flash (ou Java). O bom é que não precisa ser invasivo. Eu tenho um método ActiveX simples que retornará o tamanho do arquivo a ser carregado.

Se você usa o Flash, pode até fazer um js / css sofisticado para personalizar a experiência de upload – usando apenas o Flash (como “filme” 1×1) para acessar os resources de upload de arquivos.

Descobri que o Apache2 (você pode querer também verificar o Apache 1.5) tem uma maneira de restringir isso antes de fazer o upload soltando isso no seu arquivo .htaccess:

LimitRequestBody 2097152

Isso restringe a 2 megabytes (2 * 1024 * 1024) no upload do arquivo (se eu fiz o byte math corretamente).

Observe que quando você fizer isso, o log de erros do Apache gerará essa input quando você exceder esse limite em uma postagem de formulário ou em uma solicitação de obtenção:

 Requested content-length of 4000107 is larger than the configured limit of 2097152 

E também exibirá essa mensagem no navegador da Web:

 

Request Entity Too Large

Então, se você estiver fazendo postagens de formulário AJAX com algo como o Malsup jQuery Form Plugin, você poderia capturar a resposta H1 dessa forma e mostrar um resultado de erro.

By the way, o número do erro retornado é 413. Assim, você poderia usar uma diretiva em seu arquivo. Htaccess como …

 Redirect 413 413.html 

… e fornecer um resultado de erro mais elegante de volta.

  $(".jq_fileUploader").change(function () { var fileSize = this.files[0]; var sizeInMb = fileSize.size/1024; var sizeLimit= 1024*10; if (sizeInMb > sizeLimit) { } else { } }); 

Como outros disseram, não é possível apenas com JavaScript devido ao modelo de segurança de tal.

Se você puder, eu recomendaria uma das soluções abaixo … ambas usam um componente flash para as validações do lado do cliente; no entanto, estão conectados usando Javascript / jQuery. Ambos funcionam muito bem e podem ser usados ​​com qualquer tecnologia do lado do servidor.

http://www.uploadify.com/

http://swfupload.org/

Experimente abaixo o código:

 var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on var sizeLimit= 30; if (sizeInKB >= sizeLimit) { alert("Max file size 30KB"); return false; } 

Não é possível verificar o tamanho, a largura ou a altura da imagem no lado do cliente. Você precisa ter esse arquivo carregado no servidor e usar o PHP para verificar todas essas informações. PHP tem funções especiais como: getimagesize()

 list($width, $height, $type, $attr) = getimagesize("img/flag.jpg"); echo "\"getimagesize()";