川井義治

レトロゲーム大好き

川井義治

レトロゲーム大好き

複数画像ファイルのアップロード③(HTML+JavaScript(jQuery)+PHP)

　とうとうと言うか、遂に、『複数画像ファイルのアップロード』版が完成します。と言うかすでに複数ファイルのアップロードはできているので、今回は動きだけでなく見栄えの完成というところでしょうか。昔の偉い人が見栄えよければ全て吉と言ったかどうかはわかりませんが、ささっと完成させて春休みとしましょう。 ファイルドラッグをわかりやすくする画面と流れ　いままでの説明(①と②)で使われたFILEアップロード・ボタンは誰が見てもわかりやすいとは言い難いため、ファイル操作の指示を直接表示し、

¥500
川井義治

    • 複数画像ファイルのアップロード②(HTML+JavaScript(jQuery)+PHP)

      　複数画像ファイルのアップロードの解説がだんだんと終わりに近づいたからかちょっと中だるみな感じ、というのも、今回の記事はHTMLもPHPも全くと言っていい程に前回の記事から代わり映えがしないためでしょうか(手抜きでゴメンナサイ)。そんな中、今回健闘してくれたのは本記事の主要要素であるPHPではなくて影の主役であるJavaScriptのプログラムです。さてさて、どうなることやら、乞うご期待！！ ファイルアップロード前に画像を表示する画面と流れ 　最初の画面だけ見ると、単数ファ

      川井義治

      • 複数画像ファイルのアップロード①(HTML+PHPのみ)

        　画像ファイルのアップロード①②③では1つのファイルにのみ対応しました。顔写真とか免許証の提出ならこれで充分とはいえ、旅の写真とか、猫の写真をアップしてもらうとなると、一枚ごとにクリック→選択とか面倒だわ〜っ!!と関西のおばちゃん・おっさんに叫ばれそうですね。そんな時は複数枚のアップロードに対応しないとでしょう。ちなみに、今回からPHP7.x対応のプログラムです。 簡単なファイルアップロードを実現する画面の流れ 　ファイルアップロードを簡潔に実現したWebページの画面は「画

        川井義治

        • 画像ファイルのアップロード　③(HTML+JavaScript(jQuery)+PHP)

          　Webアプリのインターフェースには流行り廃りがあるため、お仕事用のページや、簡単なサービスを提供するページなどは、お洒落を追求するよりも見ただけでパッとわかる見栄えを提供したいものです。今回はjQueryを使ったドラッグ&ドロップの操作がわかりやすくなるインターフェースを考えて実装してみました。 ファイルのドラッグをわかりやすくなる画面と流れ 　いままでの説明(①と②)で使われたfileアップロード・ボタンは誰が見てもわかりやすいとは言い難いため、ファイル操作の内容を直接

          ¥500
          川井義治

          画像ファイルのアップロード②(HTML+JavaScript(jQuery)+PHP)

          　HTML5の機能以上を表現したければ、JavaScriptのプログラムが利用可能です。ただし、JavaScriptだけをゴリゴリに書くとブラウザ互換の問題があるやもしれません。そのため、この記事では少しでも互換性をカバーしてくれるJavaScriptのライブラリであるjQueryを利用して動きをつけています。jQueryはバージョンアップは、安定しているであろう 3.4.1 を利用しました。 ファイルアップロード前に画像を表示する画面と流れ 　プログラムを作るとき、特にW

          川井義治

          画像ファイルのアップロード②(HTML+JavaScript(jQuery)+PHP)

          川井義治

          画像ファイルのアップロード①(HTML+PHPのみ)

          　このHowTo文章(『画像ファイルのアップロード』)ではHTMLページから送信した画像ファイルなどをPHPプログラムで受け取る処理の手順を説明しています。何回かの掲載で、最終的には皆さんがよく見かける様なドラッグ&ドロップなどにも対応する実用的なプログラムへ改造していきましょう。ちなみに、サンプルを置いてあるレンタルサーバ(さくらのレンタルサーバ)のPHPのバージョンは 7.4.10 です。 簡単なファイルアップロードを実現する画面の流れ　Webプログラミングは何が面白い

          川井義治

          画像ファイルのアップロード①(HTML+PHPのみ)

          川井義治