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时，CreateFileUploadItem的值仍然为空。

要解决此问题，您应将onload的呼叫转移到{{1}}功能中。至于控制台记录正确的值，你也不能依赖于同步。我认为在该行的调试期间使用断点可能会显示真正的空值。

HTML FileReader

1 个答案: