上传文件之前，Rails 5 Bootstrap 4 Simple_Form图像预览

Question

我正在构建一个Rails 5应用程序，我有一个产品模型，在新产品表单中，我想大包预览要上传的图像。

我有从教程中获得的字段和一些JS，但是它不起作用，我似乎无法在控制台中得到任何错误吗？

我不是JS最强的人，所以这可能是我忽略的小事情。

任何帮助将不胜感激！

我的表单字段（表单输入和预览）

<%= image_tag("placeholder.png", :id => "img_prev", :class => "preview") %>
<%= f.file_field :image, :class => 'photo_upload', on: {:change => "readURL(this);"} %>

我的JS

  // Start Image Preview
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#img_prev')
          .attr('src', e.target.result)
          .width(150)
          .height(200);
      };

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