Problems when taking parameters of an image loaded from the computer

Question

Problems when taking parameters of an image loaded from the computer

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

My page.html is like this:

<!DOCTYPE html>
<html lang="es">
<head>

<link rel="stylesheet" href="css/miestilos.css">
<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
</head>
<body>
<div>
    <input type="file" id="files"  />
    <output id="list"></output>
</div>
<div id="altura">Altura</div>
<div id="anchura">Anchura</div>

<script type="text/javascript" src= "js/app.js"></script>

</body>
</html>

My script is this:

$(document).ready(function() {
 function handleFileSelect(evt) {
 var files = evt.target.files; // FileList object

 // Loop through the FileList and render image files as thumbnails.
 for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      document.getElementById('list').innerHTML='';
      span.innerHTML = ['<img class="center" id="imagen" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');


      document.getElementById('list').insertBefore(span, null);
            };

  })(f);


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

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



 });

When I take an image, it shows it correctly and inserts it into the code.

What I want to know is that when I load the image where it sets height and width I want it to show me the width and height of the image but I can not take the parameters of the image.

Thanks and best regards.

javascript jquery html

asked by Andrés 20.10.2018 в 13:44

source

2 answers

0

The truth is that I do it in another way. If you need a solution this is my code. Please read the comments in the code.

// cuando el input nuevaImagen cambia
nuevaImagen.addEventListener("change",function(event) {
   // una expresion regular para validar que el tipo de fichero es una imagen 
   var esImagen = /^image\//;
   // si el archivo es de tipo imagen   
   if (esImagen.test(event.target.files[0].type)) {
       
  // crea un nuevo elemento img  que todavía no pertenece al DOM
  var imagen = new Image();
  imagen.src = 
    window.URL.createObjectURL(event.target.files[0]);

// cuando la imagen esté cargada
  imagen.onload = function(){
  //agrega la imagen al DOM
   la_imagen.appendChild(imagen);
   
   altura.innerHTML = imagen.height;
   anchura.innerHTML = imagen.width;
  }
   
}
})

<form method="post" enctype="multipart/form-data">
    <input id='nuevaImagen' type="file"  />
</form>
<div id="la_imagen"></div>
<div>Altura: <span id="altura"></span></div>
<div>Anchura: <span id="anchura"></span></div>

answered by 20.10.2018 в 15:45

UNDIFINED INDEX PHP Notice: Undefined index: num_int in C: \ xampp \ htdocs \ ferre-max \ php \ register.php on line 14 I have 5 variables, I need to generate a SQL code

score 1 · Accepted Answer

Using your same code just add a couple of lines. The first thing I did was to look for the image already created by the id that you placed "image just after you rendered it, because if I put it before the image does not exist and I can not get its measurements, like this:

document.getElementById('imagen')

Then you assign a load event to it when it is fully loaded there, you can get its means with the this.height and this.width :

document.getElementById('imagen').addEventListener('load', function(e) { 

  document.getElementById('altura').innerHTML = "Altura: "+this.height;
  document.getElementById('anchura').innerHTML = "Anchura: "+this.width;

});

$(document).ready(function() {

  function handleFileSelect(evt) {
 
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) {
      if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();
    reader.onload = (function(theFile) {

      return function(e) {
      
        var span = document.createElement('span');
        document.getElementById('list').innerHTML='';
        span.innerHTML = ['<img class="center" id="imagen" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
        document.getElementById('imagen').addEventListener('load', function(e) { 
              
              document.getElementById('altura').innerHTML = "Altura: "+this.height;
              document.getElementById('anchura').innerHTML = "Anchura: "+this.width;
            })
        
      };

    })(f);

    reader.readAsDataURL(f);
    
  }}

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <input type="file" id="files"  />
    <output id="list"></output>
</div>
<div id="altura">Altura</div>
<div id="anchura">Anchura</div>

I hope it helps you.