Function returns undefined value!

Question

Function returns undefined value!

Navigation

#1 by (1 votes)

0

I'm trying to get the size of an image along with other parameters during upload.

<script>


        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 imagem = new Image();
      var reader = new FileReader();


          // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.


            imagem.src = e.target.result;

          var span = document.createElement('span');
          span.innerHTML = ['<img id="foto" class="materialboxed responsive-img" width="650" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');

        var output = [];

        output.push('<li><strong>', '</strong> (', theFile.type || 'n/a', ') - ',
            theFile.size, ' bytes -',imagem.onload = function() {

                  var height = this.height,
                   width = this.width;
                   alert(width+'x'+height);
                    return width+'x'+height+'oi';

                   },'</li>');
            document.getElementById('list').insertBefore(span, null);
            document.getElementById('list1').innerHTML = '<ul>' + output.join('') + '</ul>';

        };
      })(f);

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


  }

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

    </script>

I am not able to capture the value returned from the imagem.onload function, however the value appears in alert when I click to make the image preview with the dimension, with return only giving undefined . Where am I going wrong? I have tried to use variables to try to get the value, but it does not, however, alert displays the value.

javascript html5

asked by anonymous 20.02.2018 / 00:00

1 answer

Perform a related table search in Laravel and page Hide an app or bat that is running

score 1 · Accepted Answer

It turns out that the onload function is asynchronous and does not return anything, that is, it will only execute when the image has completely loaded, so the desired value is not returned.

When working with asynchronous functions, we must work with this function. That is, we should only capture the size of the image within that function and not return the value of it.

function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var file of files) {

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

        var imagem = new Image();
        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            // Render thumbnail.
            imagem.src = theFile.target.result;

            var span = document.createElement('span');
            span.innerHTML = '<img id="foto" class="materialboxed responsive-img" width="650" src="${theFile.target.result}" title="${escape(theFile.name)}"/>';

            var output = [];

            imagem.onload = function() {

            var height = this.height,
                 width = this.width;

            let result = '<li><b>${file.type || 'n/a'} - ${file.size} bytes - ${width}x${height}</b>';

            document.getElementById('list').insertBefore(span, null);
            document.getElementById('list1').innerHTML = '<ul>${result}</ul>';

            }
        });

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

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

<input type="file" id="file" />

<ul id="list"></ul>
<ul id="list1"></ul>