記事一覧
複数画像ファイルのアップロード②(HTML+JavaScript(jQuery)+PHP)
複数画像ファイルのアップロードの解説がだんだんと終わりに近づいたからかちょっと中だるみな感じ、というのも、今回の記事はHTMLもPHPも全くと言っていい程に前回の記事から代わり映えがしないためでしょうか(手抜きでゴメンナサイ)。そんな中、今回健闘してくれたのは本記事の主要要素であるPHPではなくて影の主役であるJavaScriptのプログラムです。さてさて、どうなることやら、乞うご期待！！
フ
複数画像ファイルのアップロード①(HTML+PHPのみ)
画像ファイルのアップロード①②③では1つのファイルにのみ対応しました。顔写真とか免許証の提出ならこれで充分とはいえ、旅の写真とか、猫の写真をアップしてもらうとなると、一枚ごとにクリック→選択とか面倒だわ〜っ!!と関西のおばちゃん・おっさんに叫ばれそうですね。そんな時は複数枚のアップロードに対応しないとでしょう。ちなみに、今回からPHP7.x対応のプログラムです。
簡単なファイルアップロードを実
画像ファイルのアップロード ③(HTML+JavaScript(jQuery)+PHP)
Webアプリのインターフェースには流行り廃りがあるため、お仕事用のページや、簡単なサービスを提供するページなどは、お洒落を追求するよりも見ただけでパッとわかる見栄えを提供したいものです。今回はjQueryを使ったドラッグ&ドロップの操作がわかりやすくなるインターフェースを考えて実装してみました。
ファイルのドラッグをわかりやすくなる画面と流れ
いままでの説明(①と②)で使われたfileアップ
画像ファイルのアップロード②(HTML+JavaScript(jQuery)+PHP)
HTML5の機能以上を表現したければ、JavaScriptのプログラムが利用可能です。ただし、JavaScriptだけをゴリゴリに書くとブラウザ互換の問題があるやもしれません。そのため、この記事では少しでも互換性をカバーしてくれるJavaScriptのライブラリであるjQueryを利用して動きをつけています。jQueryはバージョンアップは、安定しているであろう 3.4.1 を利用しました。
画像ファイルのアップロード①(HTML+PHPのみ)
このHowTo文章(『画像ファイルのアップロード』)ではHTMLページから送信した画像ファイルなどをPHPプログラムで受け取る処理の手順を説明しています。何回かの掲載で、最終的には皆さんがよく見かける様なドラッグ&ドロップなどにも対応する実用的なプログラムへ改造していきましょう。ちなみに、サンプルを置いてあるレンタルサーバ(さくらのレンタルサーバ)のPHPのバージョンは 7.4.10 です。