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函數之前返回。因此，當您嘗試在CreateFileUploadItem中使用它時，fileObj.Data的值仍然爲空。

要解決該問題，您應該將呼叫轉移到您的onload函數CreateFileUploadItem。至於控制檯記錄正確的值，你不能依賴於同步。我認爲在該行的調試過程中使用斷點可能會顯示真正的空值。