質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3152閲覧

rails 画像アップロード 画像選択ウインドウが表示されない

lucky_luci

総合スコア18

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/18 02:45

https://whatsupguys.net/programming-school-dive-into-code-learning-88/

この記事を参考に画像アップロードとプレユー表示の機能を実装しようとしています。
クリックして画像ファイル選択ウインドウを表示させる仕様にしたいのですが、
選択ウインドウが出てきません。ご教示ください。
carrierwaveとmini_magickはインストール済みです。

g_infosコントローラ、editアクション、view↓

```ここに言語を入力 <div id="img_field" onClick="$('#file').click()" > <% if @g_info.picture.present? %> <%= image_tag(@g_info.picture) %> <% else %> <i class="fas fa-image"></i><i class="fas fa-file-upload add"></i> <%= form.file_field :picture, class: "image", style: "display:none;", id: "file"%> <% end %> </div>

models/g_info.rb

class

1 belongs_to :user 2 mount_uploader :image, ImageUploader 3end 4

js

$fileField = $('#file') // 選択された画像を取得し表示 $($fileField).on('change', $fileField, function(e) { file = e.target.files[0] reader = new FileReader(), $preview = $("#img_field"); reader.onload = (function(file) { return function(e) { $preview.empty(); $preview.append($('<img>').attr({ src: e.target.result, width: "100%", class: "preview", title: file.name })); }; })(file); reader.readAsDataURL(file); }); });

css

width: 330px; height: 230px; margin-bottom: 5px; font-size: 15px; border: solid 1px rgb(164, 179, 239); color: #666; position: relative; padding: 0; border-radius: 5px; cursor: pointer; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #fff; overflow: hidden; box-sizing: border-box; transition: 0.3s ease-out; z-index: 10; } #img_field i { font-size: 100px; color: #aaa; line-height: 230px; width: 330px; transition: 0.3s ease-out; } #img_field i.add { display: none; font-size: 50px; position: absolute; top: -90px; right: 15px; } #img_field :hover { color: white; background-image: linear-gradient(-225deg, rgba(38,87,235,0.8) 10%, rgba(110, 222, 239, 0.8) 80%); transition: 0.3s ease-out; opacity: 0.7; } #img_field :hover i { transition: 0.3s ease-out; display: block; color: #fff; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

<%= form.file_field :picture, class: "image", style: "display:none;", id: "file"%> <% end %>

の位置が間違ってました。
img_fieldの外に出して解決しました。

投稿2019/08/18 05:09

lucky_luci

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問