0 
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 的数据文件中。这是为什么？

4

1 回答 1

2

调用readAsDataURL是异步的。因此，函数调用很可能在函数被调用之前返回onload。因此，fileObj.Data当您尝试在CreateFileUploadItem.

要修复它，您应该将调用移动CreateFileUploadItem到您的onload函数中。至于控制台记录正确的值，你也不能依赖它是同步的。我认为在调试期间在该行使用断点可能会显示真正的空值。

于 2013-02-26T22:55:22.140 回答