Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Ajax通信による画像と文字列登録処理の仕方

More than 1 year has passed since last update.

筆者について

  • 2018年4月G's Academy LAB5期に入学
  • 初めてコード書き始めて、3ヶ月目。
  • 対応可能言語:HTML, CSS, PHP, JS(jQuery), laravel

Twitter : https://twitter.com/yoheiyouhey
Instagram : https://www.instagram.com/yoheiyouhey/

投稿の経緯

先日学内でPHP選手権があり、その際に作ったサービスで有難いことに4位入賞しました。
この際に、Ajax通信による画像登録と文字列の登録同時処理に少し苦労したので、
私の書いたコードと処理内容をシェアしたいと思います。

Ajax通信処理コード

以下のような登録フォームを作りました。ここから、画像やデータの登録を行います。

Screen Shot 2018-07-04 at 11.16.11.png

変数へ画像データの挿入

Screen_Shot_2018-07-04_at_11_18_20.png
(↑jQuery内のAjax通信部分のコード)

Ajax通信による画像登録におけるポイント以下の二つです。

①"formdata"という変数を用意し、そこに"formタグ"につけたid="form"を参照して置き、

Screen_Shot_2018-07-04_at_11_32_07.png
(↑HTML内のform部分のコード)

②"new FormData"という関数で、をformのデータ取得することです。

Screen_Shot_2018-07-04_at_11_18_20-2.png

そうすることで、form内にある画像を"formdata"という変数に入れることができます。

文字列データを入れる方法

そのまま変数"formdata"を利用します。

"formdata.append(文字列データ)"とすることで、変数"formdata"に文字列データが入ってくれます。

Screen_Shot_2018-07-04_at_11_18_20-3.png

たったこれだけ!

Ajax通信コードを書く

Screen_Shot_2018-07-04_at_11_18_20-4.png

ただし、1つだけ注意点があります。
"data"の箇所に変数"formdata"とだけ書くことです。

普通の文字列のみのAjax通信でしたら、この箇所に、取ってきたデータを一つ一つ書くことが多いと思いますが、ここでは、すでに上で、変数"formdata"にデータを入れているので、不要となります。

以上が、登録フォームにおけるAjax通信の処理コードになります。

PHP処理ファイルで情報の受け取りとデータベースへの登録処理

Screen_Shot_2018-07-04_at_11_48_57.png
(↑私はsetting_act.phpをいうファイルを用意しました。)

以上で、Ajax通信による画像と文字列登録処理は完了です。

確認作業

Screen Shot 2018-07-04 at 11.54.27.png

私自身のデータを登録して見ます。

Screen_Shot_2018-07-04_at_11_55_35.png

きちんと登録されていました!

最後に

始めて、Qiitaに投稿しました。
至らない点も多いかと思いますが、これからも発信を少しずつしていけたらと思います。

アドバイスやご指摘等ありましたら非常に有難いです!
どうぞよろしくお願い致します。

fj_yohei
Vue, Nuxt, Rails, AWS, GCP, Docker, etc.... 複業でいろんな課題を解決中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away