Javascript ImagePreview

Question

Мне нужен предварительный просмотр изображения после его загрузки через <input type="file onchange="readURL(this);">.

Я нашел решение в Интернете, но у меня это не работает:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
     }
 }

"# бла" - это идентификатор изображения (оно сначала отображается с заполнителем).Ошибка, возникающая при открытии консоли после загрузки изображения: Uncaught ReferenceError: $ не определено в FileReader.reader.onload ((index): 156)

Но это работаетздесь: https://codepen.io/mobifreaks/pen/LIbca

Пожалуйста, дайте мне краткое объяснение, почему это не работает для меня, и решение для него.

  function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#preview').attr('src', e.target.result);
          };
          reader.readAsDataURL(input.files[0]);
      }
   }

#preview {
    max-width: 150px;
    max-height: 150px;
}

<input type="file" id="files" name="file" style="margin-left:1px" onchange="readURL(this);"/><br>
<img id="preview" src="" alt=""/>

Answer 1

Вы должны импортировать jquery.min.js