Get all information from the file that came from the input file

Question

Get all information from the file that came from the input file

Navigation

#1 by (6 votes)
#2 by (2 votes)

3

I know that it is possible in PHP to receive a certain file and get all information about it, such as extension, size, date, among others.

I'd like to know how you can get this information with javascript.

The user needs to select an image, and would like the image extension, size and height.

javascript jquery

asked by anonymous 27.06.2017 / 13:52

2 answers

2

With the script below you will be able to get the name, extension, size, height and width of the image sent by the user:

$('#imagem').change(function() {
  var img = document.getElementById('imagem');
  //Obter o nome da imagem
  var nome = this.files[0].name;
  //Obter a extensão
  var extensao = nome.replace(/^.*\./, '');

  //Calcular o tamanho do arquivo		
  var tamanho = ($("#imagem")[0].files[0].size / 1024);
  if (tamanho / 1024 > 1) {
    if (((tamanho / 1024) / 1024) > 1) {
      tamanho = (Math.round(((tamanho / 1024) / 1024) * 100) / 100);
      tamanho = tamanho + "Gb";
    } 
    else {
      tamanho = (Math.round((tamanho / 1024) * 100) / 100)
      tamanho = tamanho + "Mb";
    }
  } 
  else {
    tamanho = (Math.round(tamanho * 100) / 100)
    tamanho = tamanho + "kb";
  }
  //Obter largura e altura da imagem
  var altura = img.clientHeight;
  var largura = img.clientWidth;

  alert('Nome: ' + nome + "\nExtensão: " + extensao + '\nTamanho: ' + tamanho + "\nAltura: " + altura + "px" + "\nLargura: " + largura + "px");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><inputtype="file" name="imagem" id="imagem" accept="image/*">

27.06.2017 / 14:08

Remove side panel of Visual Studio Code Is it possible to delete a folder inside a repository directly from the GitHub website without using Git?

score 6 · Accepted Answer

HTML5 provides a standard format for interacting with local files by specifying the File API ( link in English). As an example of its features, the File API can be used to create a thumbnail view of the images as they are sent to the server or allow the application to save a file reference when the user is offline. In addition, you can use client-side logic to confirm that the mimetype of an upload matches your file extension or restrict the size of an upload.

The specification provides several interfaces for accessing files from a "local" file system:

File - an individual file; Provides legitimate information such as name, file size, mime type, and a reference to the file identifier.
FileList - a string similar to an array of File objects. (Think or dragging a file directory from the desktop.)
Blob - Allows you to cut a file in byte ranges.

The most direct way to load a file is to use the default element. JavaScript returns the list of selected File objects as a FileList. This example uses the "multiple" attribute to allow selection of multiple files at a single time:

// Verifica se as APIs de arquivo são suportadas pelo navegador.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Todas as APIs são suportadas!
} else {
  alert('A APIs de arquivos não é totalmente suportada neste navegador.');
}


function handleFileSelect(evt) {
  var files = evt.target.files; // Objeto FileList guarda todos os arquivos.
  var output = [];
  //Intera sobre os arquivos e lista esses objetos no output.
  for (var i = 0, f; f = files[i]; i++) {
//        console.log('Objeto do arquivo', f);
    // Informação adicional se for imagem:
    if (f.type.match('image.*')) {
      var reader = new FileReader();
      //A leitura do arquivo é assíncrona 
      reader.onload = (function(theFile) {
        return function(e) {
//              console.log('Img info', e, theFile);
          // Gera a miniatura:
          var img = document.createElement('img');
          img.src = e.target.result;
          img.title = escape(theFile.name);

          var span = document.createElement('span');
          //Obtém o tamanho:
          //Só é possível obter o tamanho do arquivo após o carregamento dele na miniatura, como o src é um base64 gerado à partir do arquivo local não terá custo de carregamento através da rede.
          img.onload = function(){
            var i = document.createElement('i');
          i.innerHTML = "<br>Tamanho Miniatura: " + img.width + "px Largura - " + img.height + "px Altura <br> Tamanho original:"+ img.naturalWidth+ "px Largura - " + img.naturalWidth+ "px Altura";
          span.appendChild(i);

          //Esse método retorna o tamanho calculado: Resultado esperado ((proporcional)x75) 

          //var width = img.clientWidth;
          //var height = img.clientHeight;
          }
          
          span.appendChild(img);
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }

    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
      f.size, ' bytes,  última modificação: ',
      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
      '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

img {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

Source: link