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使用しようとしても、 の値は null のままですCreateFileUploadItem。

CreateFileUploadItemこれを修正するには、呼び出しを関数に移動する必要がありますonload。適切な値をログに記録するコンソールに関しては、それが同期していることにも依存できません。その行でのデバッグ中にブレークポイントを使用すると、代わりに真の null 値が表示されると思います。

于 2013-02-26T22:55:22.140 に答える