Изменение размера и предварительного просмотра javascript и многократного вызова функции

Question

Ребята, я осуществляю загрузку с измененным размером предварительного просмотра. скрипт работает, но функция изменения размера вызывается много раз для каждого img, который я загружаю ... почему это происходит?

пример: http://jsfiddle.net/LL4Dj/

и вот мой код:

<form action="action" method="method"> 
    <input type="file" id="uploads" name="img[]" multiple /> 
    <button class="button">Enviar</button> 
</form> 
<div id="preview"></div> 

Script

<script type="text/javascript"> 
function imageResize(e) { 
     console.log('TIMES'); 
     var MAXWidthHeight = 100; 
     var r = MAXWidthHeight/Math.max(this.width, this.height), 
       w = Math.round(this.width * r), 
       h = Math.round(this.height * r), 
       c = document.createElement('canvas'); 
     c.width = w; 
     c.height = h; 
     c.getContext("2d").drawImage(this, 0, 0, w, h); 
     this.src = c.toDataURL(); 
     var li = document.createElement('li'); 
     li.appendChild(this); 
     document.getElementById('preview').appendChild(li); 
    } 
    function previewImages() { 
     var fileList = this.files; 
     var anyWindow = window.URL || window.webkitURL; 
     var len = (fileList.length < 4) ? fileList.length : 4; 
     for (var i = 0; i < len; i++) { 
      var objectUrl = anyWindow.createObjectURL(fileList[i]); 
      var img = new Image(); 
      img.onload = imageResize; 
      img.src = objectUrl; 
      window.URL.revokeObjectURL(fileList[i]); 
     } 
    } 
    var inputFile = document.getElementById('uploads'); 
    inputFile.addEventListener('change', previewImages, false); 
</script> 

Answer 1

Its происходит из-за этих двух линий в вашем < сценарии>,

var inputFile = document.getElementById('uploads'); 
    inputFile.addEventListener('change', previewImages, false); 

Когда будет выбрано изображение, будет вызвано событие «change» и вызывается функция «previewImages()».