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 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

它是因爲在你的< SCRIPT>這兩條線的情況發生，

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

當選擇圖像時，將觸發「更改」事件並調用「previewImages（）」函數。