railsで新規登録する画像をプレビューしたい

###前提・実現したいこと
ruby(ruby on rails)で、画像投稿機能を作成しています。
新規登録フォームで登録確定する前に、file_fieldに入れたアップロードファイルの画像を表示確認（プレビュー）できるようにしたいと思っています。
例えば、こんな風に。

現状では
編集用フォームと新規登録フォームの内容は同じなので、部分テンプレート化しています。
編集フォームの方では、file_fieldにファイルを選択すると、画像名と画像のプレビューが表示することには成功しました。しかし・・・

※編集フォームでは画像が確認できる！

新規登録フォームの方では、file_fieldにファイルを選択しても、なぜか画像ファイル名だけで、画像のプレビューが表示できなくて困っています。

※新規登録ではどんな画像を登録したか確認できない！

もし、原因と解決策が分かる方はいましたら、教えて頂ければ幸いです。

###試しに書いたソースコード
画像の投稿と編集には、carrierwaveとrmagickというgemを使っています。
Rails 5.1.3
ruby 2.4.1

新規登録と編集に使う部分テンプレートフォーム。プレビュー用のＪＳも記述してあります。
/app/views/item_stocks/_form.heml.erb

erb
1<%= form_for @my_item do |f| %>
2  <div class="form-group">
3    <%= f.label "画像" %>
4    <%= f.file_field :main_image, id: :main_image %>
5    <%= image_tag @my_item.main_image.url, id: :img_prev if @my_item.main_image? %><!-- 画像があれば表示します　-->
6  </div>
7
8<!-- アップロードしたばかりの画像のプレビューを表示する-->
9<script type="text/javascript">
10$(function() {
11 function readURL(input) {
12   if (input.files && input.files[0]) {
13     var reader = new FileReader();
14     reader.onload = function (e) {
15       $('#img_prev').attr('src', e.target.result);
16     }
17     reader.readAsDataURL(input.files[0]);
18   }
19 }
20 $("#main_image").change(function(){
21   readURL(this);
22 });
23});
24</script>
25
26    <!-- 説明文　-->
27  <div class="form-group">
28      <%= f.label :説明, class: "label-inline" %><span class="badge badge-pill badge-danger">必須</span>
29      <%= f.text_area :description, class:'form-control', rows:"5" %>
30      <small class="text-muted"><!-- テキスト--></small>
31  </div>
32
33  <div class="actions">
34      <%= f.submit "保存する", class: "btn btn-lg btn-primary" %>
35      <small class="text-muted">このボタンで保存が確定されます。</small>
36  </div>
37  </div>
38  <%#= @my_item.errors.to_yaml %>
39<% end %>

/app/views/layouts/application.html.erb
プレビュー用のjQueryを使うためにCDNコードを追記してあります。

erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>MEGTERRA</title>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!-- bootstrapサイトをスマホ対応にする -->
6    <%= csrf_meta_tags %>
7    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><!--jQueryのCDNコード（ネット上のコードにアクセスして起動するコード）。 「javascript_include_tag 'application',ata-turbolinks-track': 'reload」より上に記述する -->
8    <%= stylesheet_link_tag    'application', media: 'all',
9                               'data-turbolinks-track': 'reload' %>
10    <%= javascript_include_tag 'application',
11                               'data-turbolinks-track': 'reload' %>
12    <%= render 'layouts/shim' %>
13  </head>
14  <body>
15   <p class="notice"><%= notice %></p>
16   <p class="alert"><%= alert %></p>
17    <%= render 'layouts/header' %>
18    <div class="container">
19      <%= yield %>
20      <%#= render 'layouts/sidebar' %>
21      <%= render 'layouts/footer' %>
22    </div>
23  </body>
24</html>