3

Bom, estou tentando fazer a validação do max_size em js, porém como não entendo muito, consegui apenas validar os formatos aceitos (jpg, png, etc...)

<input type="file" name="photo" id="photo" onchange="checkfile(this);" />



function checkfile(sender) {
    var validExts = new Array(".zip", ".rar", ".pdf", ".jpeg", ".jpg", ".png", ".tif", ".gif", ".JPG");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}

Tenho um exemplo em mãos, mais não sei como colocar em conjunto com o checkthis

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 307200){
       alert("File is too big!");
       this.value = "";
    };
};
3
  • 1
    começa modificando o file para photo na variável uploadeField, e depois podes colar o teu exemplo normalmente numa tag script ou documento js. Diga o que aconteceu.
    – Edilson
    Commented 24/03/2017 às 5:27
  • Não mudou nada, ele não faz a verificação do tamanho para retornar a mensagem "File is too big" Commented 24/03/2017 às 12:24
  • mostra como fizeste essa alteração.
    – Edilson
    Commented 24/03/2017 às 12:34

2 Respostas 2

1

Faça assim:

<input type="file" name="photo" id="photo" onchange="verificar(this);" />

E podes reescrever a função dessa maneira, sem ter de recorrer ao evento onchange a toda hora. E para remover o ficheiro, basta atribuir vazio ao valor deste campo.

function verificar(ficheiro){
    var extensoes = [".zip", ".rar", ".pdf", ".jpeg", ".jpg", ".png", ".tif", ".gif"];
    var fnome = ficheiro.value;
    var extficheiro = fnome.substr(fnome.lastIndexOf('.'));
    if(extensoes.indexOf(extficheiro) >= 0){
        if(!(ficheiro.files[0].size > 307200)){
            alert('Pronto para carregar ficheiro');
            /* aqui, deve-se tambem validar o ficheiro no lado do servidor */
            return true;
        } else {
            alert('Ficheiro demasiado grande');
            // remover ficheiro
            ficheiro.value = "";
        }
    } else {
        alert('extensao inválida: ' + extficheiro);
        // remover ficheiro
        ficheiro.value = "";
    }
    return false;
}

Em vez de verificar a extensão do ficheiro, o ideal seria verificar o tipo files[n].type, assim consegue-se saber melhor de que tipo de ficheiro se trata, e isso pode ser feito de ambos os lados.

7
  • Deu certo, muito obrigado Edilson! Commented 27/03/2017 às 3:12
  • 1
    @FelipeSilva certo.
    – Edilson
    Commented 27/03/2017 às 4:27
  • acho que não testei direito, o script não está funcionando, ele não aceita nenhum formatado, e eu coloquei o input e a função exatamente como você descreveu. Ele sempre dá mensagem de formato inválido Commented 28/03/2017 às 11:26
  • 1
    @FelipeSilva pois é, havia um erro ali na extensão, eu tinha suprimido o . e não voltei a coloca-lo, editei a resposta. Podes também colocar um . no inicio da extensão: var extficheiro = '.' + ficheiro.value.split('.').pop(), podes também remover os pontos todos de var extensoes.
    – Edilson
    Commented 28/03/2017 às 17:48
  • 1
    @FelipeSilva na verdade a condição de verificação deveria ser bem mais acentuada, e em vez de verificar a extensão, deveria verificar o tipo MIME, mas assim fica mais simples, então, coloque a condição >= 0 porque o .zip possui índice 0 por ser o primeiro valor da array, faça assim: extensoes.indexOf(extficheiro) >= 0.
    – Edilson
    Commented 28/03/2017 às 22:28
1

Insere abaixo do seu comparador de extensão:

if (validExts.indexOf(fileExt) < 0) {
  alert("Invalid file selected, valid files are of " +
    validExts.toString() + " types.");
  return false;
}else if(sender.files[0].size > 307200){
  alert("File is too big!");
	this.value = "";
}
else return true;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .