Potrzebujesz pomocy, aby wygenerować trzy bloki za pomocą pętli

Question

Po 3 bloku kodu, chcesz wygenerować za pomocą pętli/tablicy, aby utworzyć krótki kod. Wiem, że korzystanie z pętli nie jest wielką rzeczą, ale dla mnie trudno jest zmienić licznik ze zmienną "openFile", chcę counter counter z zmienną "openFile" jak openFile1, openFile2 i openFile3 z każdą iteracją pętli.

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

Po prostu utwórz funkcję, która bierze pod uwagę jako arg i zwraca funkcję, która przyjmuje właśnie wydarzenie jako arg. ze względu na zamknięcie, wartość "count" podana podczas wywoływania openFile z podaną wartością count zostanie użyta dla funkcji wewnętrznej.

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]); 
     }; 
    } 

Teraz można uzyskać trzy funkcje odpowiadające co zrobiłeś dzwoniąc mapę takiego:

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

Każda funkcja w tej tablicy jest taka sama jak to, co miał.

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

Próbowałem uogólniać kod

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]); 

} 

Ale nadal wydaje się, że masz 3 kontroli przesyłania plików i chcesz wyświetlić podgląd dla każdego, tak jest?

Answer 4

Być może to zadziała.

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