Извлечь переменную из функции в цикле javascript

Question

У меня возникают проблемы со следующим сценарием: Когда пользователь нажимает кнопку загрузки и выбирает некоторые изображения, он создает divs и добавляет по одному на изображение.

Однако я не могу извлечь переменную tba из ее функции. Я знаю, что этот вопрос задавался несколько раз, и я пробовал много разных подходов (в том числе reader.onload в функции ...), однако мне не удалось успешно извлечь эту переменную.

<script type="text/javascript"> 
$(document).ready(function() { 
    function readURL(input) {  
     if (input.files) { 
      var tba = ''; 
      for (var i = 0; i < input.files.length; i++) { 
       if(input.files[i]) { 

        var reader = new FileReader(); 

        reader.onload = function (e) { 
          tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>'; 
        }; 

        reader.readAsDataURL(input.files[i]); 
       } 
      } 

      $('#gallery_container').html(tba); 
     } 
    } 
}); 
</script> 

Большое спасибо за помощь, хорошо провести время.

Answer 1

Переменная tba доступна только в пределах вашей функции. Чтобы получить доступ к tba вне этой функции, переместите декларацию за ее пределами.

// global 
    var tba = ''; 

    $(document).ready(function() { 
     function readURL(input) {  
      if (input.files) { 
       tba = ''; 

EDIT:

Так как первая часть моего ответа не предоставили требуемую помощь, как об удалении tba и сделать DOM манипулирует непосредственно?

Ваша функция должна выглядеть следующим образом:

<script type="text/javascript"> 
$(document).ready(function() { 
    function readURL(input) {  
     if (input.files) { 
      $('#gallery_container').html(''); //clear the container 
      for (var i = 0; i < input.files.length; i++) { 
       if(input.files[i]) { 

        var reader = new FileReader(); 

        reader.onload = function (e) { 
         // append your generated HTML directly 
         $('#gallery_container').append('<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>'); 
        }; 

        reader.readAsDataURL(input.files[i]); 
       } 
      } 
      // removed the dom manipulating part here 
     } 
    } 
}); 
</script> 

Answer 2

Если определить переменную вне функции он будет получать значения из функции. Это называется глобальной областью, в противном случае она доступна только в области функций.

Проверьте это:

var a = 30; 

function foo() { 
    a = 25; 
} 
foo(); 
alert(a); // will give 25 

Проверить жить here

Так что ваш код должен выглядеть следующим образом:

<script type="text/javascript"> 
$(document).ready(function() { 
    var tba = ''; 
    function readURL(input) {  
     if (input.files) { 
      for (var i = 0; i < input.files.length; i++) { 
       if(input.files[i]) { 

        var reader = new FileReader(); 

        reader.onload = function (e) { 
          tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>'; 
        }; 

        reader.readAsDataURL(input.files[i]); 
       } 
      } 

      $('#gallery_container').html(tba); 
     } 
    } 
}); 
</script>