FileReader, кажется, не работает

Question

Мне нужно сделать предварительный просмотр файлов, которые загружаются с помощью ввода. Все работает нормально, за исключением того, что загруженное изображение не показывается. Мой код:

// variable val is the file variable which I need to append 
var reader = new FileReader();
reader.onload = function(e) {
    $('#1st').append("<img id='img-1-"+(i+t1)+"' src=''/><div id='upl-1-"+(i+t1)+"'><p>"+val.name
    +"</p><div class='btn btn-danger' style='margin-bottom: 30px' onClick='removeItem1("+(i+t1)+")'>Remove item</div></div>");
    $('#img-1-1').ready = function()
        $('#img-1-1').src = e.target.result;
   }
reader.readAsDataURL(val);

Он отображает мне правильное имя файлов через val.name, поэтому с файловой переменной все в порядке. Но почему это не работает, чтобы показать изображение? В элементе inspect он показывает, что src = (неизвестно). Если я вставлю в src первого добавления некоторый случайный текст, текст останется прежним. Источник даже не меняется. Что я могу сделать, чтобы это исправить?