Obtenha o tamanho do arquivo, largura e altura da imagem antes de fazer o upload
Como posso obter o tamanho do arquivo, altura e largura da imagem antes de fazer o upload para o meu site, com jQuery ou JavaScript?
este link é muito útil: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
Aqui está um tutorial passo a passo para obter o nome, tipo e tamanho do arquivo codepedia.info/…
Obrigado por sua pergunta . Mamnoon
— Mohammadali Mirhamed
Upload de várias imagens com visualização de dados de informações
Usando HTML5 e a API File
Exemplo usando URL API
As fontes de imagens serão um URL que representa o objeto Blob
Exemplo de uso da API FileReader
No caso de você precisar de fontes de imagens como strings de dados codificados em Base64
@SMC caniuse.com/fileapi só recentemente oferece suporte à API de arquivo. Vou dar uma olhada
quando o valor de i é alertado na função de retorno de chamada reader.onload, ele mostra um incremento aleatório! por exemplo, para 4 arquivos, o valor alertado foi 0 3 2 1. Alguém pode explicar isso?
— freerunner de
@freerunner seus arquivos têm tamanhos diferentes, portanto, não carregados ao mesmo tempo.
Infelizmente, isso requer o carregamento da imagem duas vezes. Seria muito melhor se pudéssemos obter a largura e a altura como propriedades de arquivo, como o tipo de arquivo.
Parece com developer.mozilla.org/en-US/docs/…
Se você pode usar o plugin de validação jQuery, você pode fazer assim:
A função é passada como função ab onload.
O código é retirado daqui
— Jozífek Chramršt
'this' in this'files [0] não tem valor. Isso deve ser alterado para element.files [0] para que funcione.
Como fazer isso para a seleção de vários arquivos?
— Shaik Nizamuddin
Não tenho certeza se é o que você deseja, mas apenas um exemplo simples:
Aqui está um exemplo puro de JavaScript de escolher um arquivo de imagem, exibi-lo, percorrer as propriedades da imagem e, em seguida, redimensionar a imagem da tela em uma tag IMG e definir explicitamente o tipo de imagem redimensionada para jpeg.
Se você clicar com o botão direito na imagem superior, na tag da tela, e escolher Salvar arquivo como, o formato padrão será PNG. Se você clicar com o botão direito e Salvar arquivo como a imagem inferior, o formato padrão será JPEG. Qualquer arquivo com mais de 400px de largura é reduzido para 400px de largura e uma altura proporcional ao arquivo original.
Aqui está um jsFiddle:
jsFiddle Escolha, exiba, obtenha propriedades e redimensione um arquivo de imagem
No jsFiddle, clicar com o botão direito na imagem superior, que é uma tela, não fornecerá as mesmas opções de salvar que clicar com o botão direito na imagem inferior em uma tag IMG.
Pelo que eu sei, não há uma maneira fácil de fazer isso, pois Javascript / JQuery não tem acesso ao sistema de arquivos local. Existem alguns novos recursos no html 5 que permitem que você verifique certos metadados, como o tamanho do arquivo, mas não tenho certeza se você pode realmente obter as dimensões da imagem.
Aqui está um artigo que encontrei sobre os recursos do html 5 e uma solução alternativa para o IE que envolve o uso de um controle ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
— Russell Durham
Então, comecei a experimentar as diferentes coisas que a API FileReader tinha a oferecer e poderia criar uma tag IMG com um URL DATA.