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

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

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

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

JavaScript

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

Q&A

1回答

933閲覧

javascriptで画像を投稿するコードでわからないところが

you88

総合スコア147

Ruby on Rails

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

JavaScript

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

0グッド

1クリップ

投稿2018/10/08 02:38

http://herikutu.hatenablog.com/entry/2014/11/25/225205

こちらの記事をもとにhtml2canvasで作成した画像をサーバにおくろうとしているのですが下記の記述が何をやっているのかよくわからず。。。

  • "#new_item"はどこからでてきたのか?
  • $("#item_image").val(""); //画像データを二重に送信するのを防ぐ→これでなぜ2重送信を防げるのか?
// サーバーにポストする操作 $("#canvas_output").on("click", function () { var _form = $("#new_item"); var canvas = document.getElementById("canvas"); var canvas_data = canvas.toDataURL(); $("#item_image").val(""); //画像データを二重に送信するのを防ぐ $("#item_remote_image_url").val(canvas_data); _form.submit(); });

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

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

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

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

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

guest

回答1

0

Q: #new_item"はどこからでてきたのか?

A: form_forさんがやってくれてます。

https://guides.rubyonrails.org/form_helpers.html
詳しいのは上のリンクを!

本文のnew_item, item_image, canvas_output..などは、

ruby

1<%= form_for(@item) do |f| %> 2 <%= f.file_field :image %> 3 <%= f.hidden_field :remote_image_url %><!-- 今回の修正で追加 --> 4 <%= f.hidden_field :user_id, :value => current_user.id %> 5<% end %>

元ブログから持ってきた上記のソースから作成されるHTMLです。あのソースによってHTMLに吐き出される時、@itemと:imageの名前が合体してitem_imageというidになるオブジェクトになります。

Q: $("#item_image").val(""); //画像データを二重に送信するのを防ぐ→これでなぜ2重送信を防げるのか?

A: これはまあ、ブログにあるソースの内部的なロジックに関わってると思いますが。。。

例えば、あるユーザーが、ミスってアップロードボタンをダブルクリックをしたとしましょう。最初のクリックでitem_imageは消されます。続いて二度目のクリックでは空っぽのitem_imageを送信する事になるんですよね。二度目のクリックからitem_imageがないという事は投稿する画像がなくなる事を意味しますので、同じ画像を二度アップロードする事を防ぐことが出来るという流れです。

投稿2018/10/09 10:09

yeondev

総合スコア198

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問