如何循環這個功能？

由於對這裏一些幫助我有預覽選擇圖像的方式，並上傳使用：如何循環這個功能？

<input type='file' name="files[]" onchange="readURL(this);" multiple /> 
<div id="previews"></div> 

<script> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 

      var reader = new FileReader(); 

      reader.onload = function (e) { 
       var container = $('#previews'); 
       var image = $('<img>').attr('src', e.target.result).width(150); 
       image.appendTo(container); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

我想知道如何循環輸入選擇此功能爲每個文件？我只是不知道在哪裏使用類似。每（）

編輯：

我想這個..但其錯誤的地方，因爲它顯示2個預覽，但相同的圖像的兩者兼而有之？

function readURL(input) { 
    $.each(input.files,function(i) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var container = $('#previews'); 
      var image = $('<img>').attr('src', e.target.result).width(150); 
      image.appendTo(container); 
     }; 
     reader.readAsDataURL(input.files[0]); 
    }); 
}

來源

2013-02-09 rpsep2

因爲該函數在更改事件上被調用;沒有循環。 – muratgu 2013-02-09 21:27:56

如果選擇多個圖像，比如'input.files [2]'等，你的意思是循環選定的圖像。 – adeneo 2013-02-09 21:31:16

你可以在編程中閱讀更多關於事件的信息，尤其是在JS這裏：http://stackoverflow.com/questions/5758363/how-do-event-handling-work-internal-with-javascript – nXqd 2013-02-09 21:32:27

input.files是FileList，它的作用就像一個數組。
您可以像其他任何陣列一樣使用jQuery.each。

來源

2013-02-09 21:31:10 icktoofay

如果你發現w3c的定義很難閱讀，這裏有一個[容易理解的]（https://developer.mozilla.org/en-US/docs/DOM/FileList）。 – 2013-02-09 21:43:51

您只需要循環選擇文件的最後一行。

function readURL(input) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var container = $('#previews'); 
     var image = $('<img>').attr('src', e.target.result).width(150); 
     image.appendTo(container); 
    }; 

    $.each(input.files,function(i) { 
     reader.readAsDataURL(input.files[i]); 
    }); 
}

來源

2013-02-09 22:26:35 Drahcir

如何循環這個功能？

回答

相關問題