Cần giúp đỡ để tạo ra ba khối bằng cách sử dụng vòng lặp

Question

Theo sau 3 khối mã, muốn tạo ra bằng cách sử dụng vòng lặp/mảng để làm cho mã ngắn. Tôi biết sử dụng vòng lặp không phải là một điều lớn, nhưng đối với tôi rất khó để thay đổi truy cập với biến "openFile", tôi muốn tăng số lượt truy cập với biến "openFile" như openFile1, openFile2 và openFile3 với mỗi lần lặp của vòng lặp.

$(function() { 

      var openFile1 = function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = document.getElementById('img1'); 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[0]); 
     }; 



     var openFile2 = function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = document.getElementById('img2'); 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[0]); 
     }; 

     var openFile3 = function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = document.getElementById('img3'); 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[0]); 
     }; 


     }); 

Answer 1

Chỉ cần tạo hàm được tính là arg và trả về hàm chỉ diễn ra sự kiện dưới dạng arg. do đóng cửa, giá trị của 'count' được đưa ra khi gọi openFile với một giá trị đã cho sẽ được sử dụng cho hàm bên trong.

var openFileFunc = function(count) { 
    return 
     function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = document.getElementById('img'+(count+1)); 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[count]); 
     }; 
    } 

Bây giờ bạn có thể nhận được ba chức năng tương đương với những gì bạn đã làm bằng cách gọi một bản đồ như thế này:

var functions = [1,2,3].map(openFileFunc)

Mỗi chức năng trong mảng này cũng giống như những gì bạn đã có.

Answer 2

var openFile = function(arrOfCount){ 
    var reader; 
    for(i=0;i<arrOfCount;i++){ 
     reader= new FileReader(); 
     return function(event){ 
      var input = event.target; 
      reader.onload = function(){ 
        var dataURL = reader.result; 
        var output = document.getElementById('img'+(i+1)); 
        output.src = dataURL; 
       }; 
      reader.readAsDataURL(input.files[i]); 
      } 
     } 
} 

Answer 3

Tôi đã cố gắng để khái quát đang

var allImages = document.getElementsByClassName("my-images"); 
for (var i = 0; i < allImages.length; i++) { 
     var openFile = function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = allImages[i]; 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[0]); 

} 

Nhưng vẫn có vẻ như bạn có 3 điều khiển tập tin tải lên và bạn muốn hiển thị xem trước cho mỗi, là nó như vậy?

Answer 4

Có thể điều này sẽ phù hợp với bạn.

function callFunctionNtimes(totalCount){ 

     for(start=1;i<=totalCount;i++) 
     { 
      var filevar = 'openFile'+start; 
      filevar = function(event) 
      { 
       var input = event.target; 
       var reader = new FileReader(); 
       reader.onload = function() 
       { 
        var dataURL = reader.result; 
        var output = document.getElementById('img'+start); 
        output.src = dataURL; 
       }; 
        reader.readAsDataURL(input.files[0]); 
      }; 
     } 
    } 
     //to call n time below function 
     var totalCount = 3; 
     callFunctionNtimes(totalCount);