Question

window.onload = function() {
  var count = 0;
  document.getElementById('files').addEventListener('change',
    handleFileSelect, false);
  function handleFileSelect(evt) {
    console.log("hariii");
    var files = evt.target.files;
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      count++;
      // 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');
          span.innerHTML = ['<img style="height: 75px; border: 1px solid #000; 
            margin: 5 px " src="
            ',
            e.target.result,
            '" title="', escape(theFile.name),
            '"/>'
          ].join('');  document.getElementById('thumbnail').insertBefore(span null);
        };
      })(f);
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
    //console.log(count);
    return (count)
  }
}

我的javascript不好。我想从使用此

尝试的eventlistnernfunction返回值'count'

var x = handleFileSelect(evt);
console.log(x);

但它给出了错误。 'handlefileselect未定义'。我知道这是一个愚蠢的但我是javascript的新手。感谢您的想法和帮助。

Answer 1

我找到了一种访问返回值的方法。但这不是标准方式。这是一个小技巧。在html正文部分中创建隐藏字段，并将javascript变量值分配给该隐藏字段。当该值需要时，通过document.ElementBy方法获取该字段值。它工作正常但不是标准方式。

Answer 2

问题是为什么变量count不能作为此事件监听器（或任何其他事件监听器/处理程序/回调）的返回，不是因为它是一个事件（填空），因为count的性质和目的。它的假定目的是count是一个简单的计数器，计数器通常是全局的（在这种情况下），并且在迭代中递增（在这种情况下也是如此）。作为一个全球性的，count可以从任何地方访问。在count递增后count++，您可以获得var files = document.getElementById('files'); var count = 0; files.addEventListener('change', handleFileSelect, false); function handleFileSelect(evt) { var counter = evt.target.nextElementSibling; var dock = document.getElementById('thumbnail'); var files = evt.target.files; for (let i = 0; i < files.length; i++) { var f = files[i]; count++; if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(file) { return function(e) { var str = ` <span class='frm'> <img src="${e.target.result}" class='tmb' title="${escape(file.name)}"> </span>`; dock.insertAdjacentHTML('beforeend', str); }; })(f); reader.readAsDataURL(f); } counter.textContent = count; console.log(count); }的值。

此演示是this article中修改过的工作演示。如果您需要详细信息，请访问：

演示

＆＃13;

.tmb {
  height: 100px;
  width: 75px;
  border:1px solid #000;
  margin: 5px
}

.frm {
  display: inline-block;
}

label, input {
  font: 700 16px/1.45 Consolas;
  color: red;
}

label {font-size:32px}

＆＃13;

<input id='files' type='file' name='files' accept="image/*"> <label for='files'></label><br>
<output id='thumbnail'></output>

＆＃13;

{{1}}

＆＃13;

如何从eventlistner函数返回一个值

2 个答案:

演示