HTML FileReader

Question

function fileSelected() { 
    // get selected file element 
    var files = document.getElementById('files[]').files; 

    for (var i = 0; i < files.length; i++) //for multiple files   
    { 
     (function (file) { 
      var fileObj = { 
       Size: bytesToSize(file.size), 
       Type: file.type, 
       Name: file.name, 
       Data: null 
      }; 

      var reader = new window.FileReader(); 
      reader.onload = function (e) { 
       fileObj.Data = e.target.result; 
      }; 
      // read selected file as DataURL 
      reader.readAsDataURL(file); 

      //Create Item 
      CreateFileUploadItem(fileObj); 

     })(files[i]); 
    } 
} 

function CreateFileUploadItem (item) { 
    console.log(item); 

    $('<li>', { 
     "class": item.Type, 
     "data-file": item.Data, 
     "html": item.Name + ' ' + item.Size 
    }).appendTo($('#filesForUpload')); 
} 

따라서 console.log (item)가 CreateFileUploadItem 함수에서 실행되면 item.Data가 표시됩니다. 그러나 LI의 데이터 파일에는 추가되지 않습니다. 왜 그런가요?

Answer 1

readAsDataURL에 대한 호출은 비동기입니다. 따라서 함수 호출은 onload 함수가 호출되기 전에 반환 될 가능성이 큽니다. 따라서 fileObj.Data의 값은 CreateFileUploadItem에서 사용할 때 여전히 null입니다.

전화를 수정하려면 CreateFileUploadItem으로 전화를 이동하여 onload 기능으로 이동해야합니다. 콘솔이 적절한 값을 로깅하는 경우, 동기가되는 것에 의존 할 수 없습니다. 그 줄에서 디버깅하는 동안 중단 점을 사용하는 대신 실제 null 값이 표시 될 가능성이 높습니다.