Как я могу получить переменную вне eventlistener?

Question

Я хотел создать код js, который генерирует список выбранных изображений, с большим пальцем, именем файла и размером файла текущего изображения. Но что-то не так, потому что я не могу достичь имени файла и файла, потому что eventListener этого не видит. Любое решение?

$('#media_uploader').change(function() { 
    var files = document.getElementById("media_uploader").files; 
    var output = document.getElementById("info"); 
    output.innerHTML = ''; 
    for(var i = 0; i< files.length; i++) 
    { 
     var file = files[i]; 
     if(!file.type.match('image')) 
      continue; 

     var picReader = new FileReader(); 
     picReader.addEventListener("load",function(event){ 
      var picFile = event.target; 
      var div = document.createElement("div"); 
      div.innerHTML = '<img src="' + picFile.result + '" />'; 

      var lineNode = document.createElement('div'); 
       lineNode.setAttribute('class','uploaded_file_line'); 

      var fileThbDivNode = document.createElement('div'); 
       fileThbDivNode.setAttribute('class','uploaded_file_thb'); 
      fileThbDivNode.appendChild(div); 
      lineNode.appendChild(fileThbDivNode); 

      var fileNameDivNode = document.createElement('div'); 
       fileNameDivNode.setAttribute('class','uploaded_file_name'); 
      var fileNameNode = document.createElement('input'); 
       fileNameNode.setAttribute('value',picFile.name); 
      fileNameDivNode.appendChild(fileNameNode); 
      lineNode.appendChild(fileNameDivNode); 

      var fileExtensionDivNode = document.createElement('div'); 
       fileExtensionDivNode.setAttribute('class','uploaded_file_extension'); 
      var fileExtensionNode = document.createElement('span'); 
       fileExtensionNode.innerHTML = "JPG"; 
      fileExtensionDivNode.appendChild(fileExtensionNode); 
      lineNode.appendChild(fileExtensionDivNode); 

      var fileSizeDivNode = document.createElement('div'); 
       fileSizeDivNode.setAttribute('class','uploaded_file_size'); 
      var fileSizeNode = document.createElement('span'); 
       fileSizeNode.innerHTML = Number((((picFile.size)/1024)/1024).toFixed(3)) + " Mbytes"; 
      fileSizeDivNode.appendChild(fileSizeNode); 
      lineNode.appendChild(fileSizeDivNode); 

      var clearDivNode = document.createElement('div'); 
       clearDivNode.setAttribute('class','clear'); 
      lineNode.appendChild(clearDivNode); 

      output.appendChild(lineNode); 
     }); 
     picReader.readAsDataURL(file); 
    } 
}); 

Answer 1

Попробуйте объявить Var файлы за пределами функции изменения

Answer 2

Я думаю, что что-то подобное может работать для вас

var stuffIcannotSee; 

var my_func=function(importStuff){ 
     return function(e){ 
      alert(importStuff + "This is now in the context of the function"); 
     }; 
}(stuffIcannotSee); 

$('#media_uploader').change(my_func);