LoginSignup
58
86

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@icelandnono(るかぜ)

PHP 画像あっぷろーど

Last updated at Posted at 2017-05-19

サーバにファイルをアップロードする

主な流れ★ミ

  1. formタグを method="post" enctype="multipart/form-data" で作成（HTMLフォーム側）
  2. inputタグを type="file" にしたフィールドを作成（HTMLフォーム側）
  3. $_FILESでアップロードされた一時ファイルのデータを受け取る（PHPでの処理側）
  4. is_uploaded_file()でファイルがHTTPアップロードされたかどうかを確認（PHPでの処理側）
  5. move_uploaded_file()で一時ディレクトリから保存ディレクトリに移動（PHPでの処理側）
    :star:アップロードされた画像はサーバ内のテンポラリという場所に自動的に入れられる。このテンポラリという場所は一時的なフォルダ。
    ファイルがアップロードされると、アップロードされた画像はサーバ内のテンポラリというフォルダに入れられ、そのプログラムが終わるとテンポラリから画像が破棄される。
    このため、テンポラリフォルダの中にある画像を新しい画像フォルダを作り、(消えない)画像フォルダに移す必要がある。

参考元
611801.png
参考元

enctype

enctype 送信時MIMEタイプを指定。送信時のデータ形式を指定する。
MIMEタイプ メールやホームページのファイルにくっつけて送られる。「このファイルはこんな種類のファイルだよ」な情報。
MIMEタイプの形式 ファイルの分類/ファイルの種類
multipart 複数のファイルをまとめるための形式。HTTPではフォームへの入力内容とアップロードするファイルをまとめるために使う。

d005786-3.png

参考サイト

アップロード用のフォーム【P166】

ファイルをアップロードするには、以下のような<form>タグを記述する。
enctype属性にmultipart/form-dataを指定することがポイント。

<form action="upload-output.php" method="post" enctype="multipart/form-data">

さらに<input>タグを記述して、
type属性をfileにする。
これでファイル選択欄が表示される。

<input type="file" name="file">

enctype="multipart/form-data"

■POINT
↓フォームにファイルを送信する機能がある場合に指定する
enctype="multipart/form-data"
データをマルチパートデータとして送信する。
フォーム内にファイルの送信欄を配置する場合は、この形式を使う。

　　　　　　
マルチパート リクエストで複数のフォームデータ(マルチパート)を送るための形式。複数の異なる種類のデータを格納する方式。普通、1ファイルしかアップロードできないが、複数のファイルを同時にアップロードできるようになる。2つ以上のファイルを同時に送れるようになる。
具体的には格納データがファイルデータごとにバウンダリ文字というもので区切られ、それぞれのデータを個別に判断できるようになるというもの
バウンダリ文字列 送信する複数のデータの区切りになる文字列

参考サイト

バウンダリ文字列をみたい

　　　　　
バウンダリ文字列 送信する複数のデータの区切りになる文字列
バウンダリ文字列をみてみたい
<form method="post" enctype="multipart/form-data">
<input type="text" name="a" value="123"><br>
<input type="text" name="b" value="456"><br>
<input type="submit" value="go">
</form>

<?PHP
$h=apache_request_headers();
print $h["Content-Type"];
?>
　 　　　　　　　　
apache_request_headers() すべてのHTTPリクエストヘッダを取得する
HTTPリクエストヘッダ 「お願い事やお願い元に関するあれこれ」が書かれている

HTTPリクエストヘッダにはクライアントからサーバに渡される情報あれこれが設定されている。主にお願いごとにやお願い元に関するあれこれについて。

■まとめ
HTTPリクエストヘッダ
HTTPリクエストの部品で『お願い事やお願い元に関するあれこれ』が書かれている

upload-top.php
<?php
if(isset($_FILES)&& isset($_FILES['upfile']) && is_uploaded_file($_FILES['upfile']['tmp_name'])){
	if(!file_exists('upload')){
		mkdir('upload');
	}
	$a = 'upload/' . basename($_FILES['upfile']['name']);
	if(move_uploaded_file($_FILES['upfile']['tmp_name'], $a)){
		$msg = $a. 'のアップロードに成功しました';
	}else {
		$msg = 'アップロードに失敗しました';
	}
}
?>

<?php require 'header.php'; ?>
<h1>アルバム作成：画像アップロード</h1>
<p><form action="upload_top.php" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="submit" value="読み込み">
</form></p>
<?php
if(isset($msg) && $msg == true){
	echo '<p>'. $msg . '</p>';
}
?>
<a href="upload_top.php">戻る</a>
<?php
$h = apache_request_headers();
var_dump($h["Content-Type"]);
?>
<?php require 'footer.php';?>

■実行結果
screencapture-localhost-picture_upload-upload_top-php-1496122161022.png

これがバウンダリ文字列
string 'multipart/form-data; boundary=----WebKitFormBoundary1QAhOe7eNI2CDGJm' (length=68)

firefoxでバウンダリ文字列をみたい

三→開発ツール→開発ツールを表示→ウェブコンソール→ネットワーク→POST URL→バウンダリ文字列が見れる

コンソールからネットワークをひらいて
サブミットしてやるとpostしたurlが表示されるので詳細を開いて
「POST」を選択すると「生データ」が表示される。

サーバにファイルを送信する

例
<input type="file" name="gazou">

ファイルをサーバ上に保存する【P167】

アップロードされたファイルの確認【P168】

テンポラリ

アップロードされたファイルは、サーバ内のテンポラリという場所に自動的に格納される。例えば、ファイルをアップロードすると、そのプログラムが始まるときにテンポラリに画像がアップロードされ、プログラムが終わったときにテンポラリから画像が破棄される。
このため、一時的な(消えてしまう)場所にあるテンポラリの画像を画像フォルダに移動する必要がある。
アップロードされたファイルは、一時的なファイルに保存される。
この一時的なファイルのファイル名は、以下の記述で取得可能。

$_FILES['file']['tmp_name']

ここで取得した一時的なファイルが、
入力画面からアップロードされたファイルかどうかを
is_uploaded_fileで調べる。

tmp_name

tmp_nameの中身を知りたくてvar_dumpで調べてみた。
var_dump($_FILES['file']['tmp_name']);
これを追加してみた。
20170523.png
201705231.png

upload-input.php
<p>アップロードするファイルを指定してください。</p>
<form action="upload-output.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file"></p>
<p><input type="submit" value="アップロード"></p>
</form>
<p>
	<a href="main.php">一覧へ戻る</a>
</p>
upload-output.php
<?php
if (is_uploaded_file ( $_FILES ['file'] ['tmp_name'] )) {
	if (! file_exists ( 'upload' )) {
		mkdir ( 'upload' );
	}
	$file = 'upload/' . basename ( $_FILES ['file'] ['name'] );
	if (move_uploaded_file ( $_FILES ['file'] ['tmp_name'], $file )) {
		echo $file, 'のアップロードに成功しました。';
		echo '<p><img src="', $file, '"></p>';
	} else {
		echo 'アップロードに失敗しました。';
	}
} else {
	echo 'ファイルを選択してください。';
}
?>
<p>
	<a href="main.php">一覧へ戻る</a>
</p>
<?php
var_dump($_FILES['file']['tmp_name']);
?>
test56-input.php
<form action="test56-output.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="apple"></p>
<p><input type="submit" value="アップロード"></p>
</form>

■これでも一応機能する...↓

test56-output.php
<?php
$file = 'upload/'. basename($_FILES['apple']['name']);
move_uploaded_file($_FILES['apple']['tmp_name'], $file);
echo '<p><img src="',$file,'"></p>';
?>

フォルダの作成

アップロードされたフォルダを保存するために、
サーバ上にフォルダを作成する。

$_FILES

$_FILES POSTメソッドでアップロードしたファイルの情報を格納した多次元配列となる

$_FILESの中身を
var_dump($_FILES)で表示してみた。201705232.png

is_uploaded_file

is_uploaded_file(ファイル名) HTTP　POSTでアップロードされたファイルかどうかを調べる
$_FILES['名前']['tmp_name'] 一時保存ファイル名

is_uploaded_file関数は、
セキュリティのために、
指定したファイルがアップロードされたファイルかどうかを確認する。

basename(パス)

basename(パス) パスの最後にある名前の部分を返す
ファイルorディレクトリへのパスを含む文字列を受け取って、最後にある名前の部分を返す 
echo basename('C:\Users\takahashi');
実行結果
takahashi

move_uploaded_file(一時的なファイル,保存先のファイル)

move_uploaded_file(一時的なファイル,保存先のファイル) アップロードされたファイルを新しい位置に移動する
move_uploaded_file(アップロードしたファイル,ファイルの移動先)
テンポラリからアルバムフォルダに移動
$file = 'upload/' . basename ( $_FILES ['upfile'] ['name'] );
	if (move_uploaded_file ( $_FILES ['upfile'] ['tmp_name'], $file )) {

より安全なファイル名に

先程のプログラムだと、テンポラリからalbumフォルダ内に画像を移動したとき、すでに同じファイル名の画像があると上書きされてしまう。
新しいファイル名をアップロード前のファイル名から付けるのではなく、プログラム側で決めるようにする。
プログラム側で決めるファイル名は
「年月日時分秒」とランダムな数字から成るファイル名にしたい。

mt_rand

mt_rand() ランダムな数字を取得する関数。
mt_rand(最小値,最大値) 最小値から最大値までのランダムな数字を返す。 mt_rand(3,10)とすると3から10の間の数字が返ってくる
ランダムな数字のことを擬似乱数という。

exif_imagetype(ファイル名)

exif_imagetype(ファイル名) 画像の型を定義する。画像の種類を調べる
upload-input.php
<?php require 'header.php'; ?>
<p>アップロードするファイルを指定してください。</p>
<form action="upload-output.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="upfile"></p>
<p><input type="submit" value="アップロード"></p>
</form>
<p>
	<a href="main.php">一覧へ戻る</a>
</p>
<?php require 'footer.php';?>
<?php
var_dump(exif_imagetype())
?>
■実行結果
string 'image/gif' (length=9)
例②
if(exif_imagetype($_FILES['upfile']['tmp_name']) == IMAGETYPE_PNG){
	echo 'PNG';
}

こうするとPNGファイルがアップロードされたら、
PNGという文字が出る。

exif_imagetypeをvar_dumpしてみた

var_dump(exif_imagetype($_FILES['image']['tmp_name']));

JPGがアップロードされたら
2
PNGだったら
3
GIFがアップロードされたら
1
の数字が
exif_imagetype関数の返り値として返る。

20170605.png

upload2.php
$msg = null;

if(isset($_FILES['image']) && is_uploaded_file($_FILES['image']['tmp_name'])){
$new_name = date('YmdHis');
$new_name .= mt_rand();
switch (exif_imagetype($_FILES['image']['tmp_name'])){

	case IMAGETYPE_JPEG:
		$new_name .= '.jpg';
		break;
	case IMAGETYPE_GIF:
		$new_name .= '.gif';
		break;
	case IMAGETYPE_PNG:
		$new_name .= '.png';
		break;
	default:
		header('Location:upload2.php');
		exit();
}
var_dump(exif_imagetype($_FILES['image']['tmp_name']));
	if(move_uploaded_file($_FILES['image']['tmp_name'], 'album/'.$new_name)){
		$msg = 'アップロードしました。';
	}else {
		$msg = 'アップロードできませんでした。';
	}
}

ソースコード

1つのファイルのみで処理を書くやり方

upload-top.php
<?php
$msg = null;
// もし$_FILES['upfile']があって、一時的なファイル名の$_FILES['upfile']が
// POSTでアップロードされたファイルだったら
if(isset($_FILES['upfile']) && is_uploaded_file($_FILES['upfile']['tmp_name'])){
	$old_name = $_FILES['upfile']['tmp_name'];
// 	もしuploadというフォルダーがなければ
	if(!file_exists('upload')){
		mkdir('upload');
	}
	$new_name = date("YmdHis"); //ベースとなるファイル名は日付
	$new_name .= mt_rand(); //ランダムな数字も追加
	switch (exif_imagetype($_FILES['upfile']['tmp_name'])){
		case IMAGETYPE_JPEG:
			$new_name .= '.jpg';
			break;
		case IMAGETYPE_GIF:
			$new_name .= '.gif';
			break;
		case IMAGETYPE_PNG:
			$new_name .= '.png';
			break;
		default:
			header('Location: upload.php');
			exit();
	}
// 	もし一時的なファイル名の$_FILES['upfile']ファイルを
// 	upload/basename($_FILES['upfile']['name'])ファイルに移動したら
	$gazou = basename($_FILES['upfile']['name']);
	if(move_uploaded_file($old_name, 'upload/'.$new_name)){
		$msg = $gazou. 'のアップロードに成功しました';
	}else {
		$msg = 'アップロードに失敗しました';
	}
}
?>

<?php require 'header.php'; ?>
<h1>アルバム作成：画像アップロード</h1>
<p><form action="upload_top.php" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="submit" value="読み込み" name="yomikomi">
</form>
</p>
<?php
if(isset($msg) && $msg == true){
	echo '<p>'. $msg . '</p>';
}
?>
<a href="upload_top.php">戻る</a>
<?php require 'footer.php';?>

アップロードの際にエラー

Warning: mkdir(): Permission denied in

会社のサーバから実行しようとしてアップロードをクリックしたらこんなエラーが出た。

Warning: mkdir(): Permission denied in /home/takahashi/public_html/upload-output.php on line 6 Warning: move_uploaded_file(upload/img_12.jpg): failed to open stream: No such file or directory in /home/takahashi/public_html/upload-output.php on line 9 Warning: move_uploaded_file(): Unable to move '/tmp/phpjNvAQj' to 'upload/img_12.jpg' in /home/takahashi/public_html/upload-output.php on line 9 アップロードに失敗しました。

httpd(Apache等)に実行権限が無ければディレクトリを作る事は出来ないらしい。。
作成したいディレクトリの親ディレクトリの実行権限を確認しないといけないみたいです。

まとめ(ソースコード)

1つのファイルのみで書くソースコード

upload_top.php
<?php
$msg = null;
// もし$_FILES['upfile']があって、一時的なファイル名の$_FILES['upfile']が
// POSTでアップロードされたファイルだったら
if(isset($_FILES['upfile']) && is_uploaded_file($_FILES['upfile']['tmp_name'])){
// 	もしuploadというフォルダーがなければ
	if(!file_exists('upload')){
		mkdir('upload');
	}
	$new_name = date("YmdHis");
	$a = 'upload/' . basename($_FILES['upfile']['name']);
// 	もし一時的なファイル名の$_FILES['upfile']ファイルを
// 	upload/basename($_FILES['upfile']['name'])ファイルに移動したら
	if(move_uploaded_file($_FILES['upfile']['tmp_name'], $a)){
		$msg = $a. 'のアップロードに成功しました';
	}else {
		$msg = 'アップロードに失敗しました';
	}
}
?>

<?php require 'header.php'; ?>
<h1>アルバム作成：画像アップロード</h1>
<p><form action="upload_top.php" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="submit" value="読み込み" name="yomikomi">
</form>
</p>
<?php
if(isset($msg) && $msg == true){
	echo '<p>'. $msg . '</p>';
}
?>
<a href="upload_top.php">戻る</a>
<?php require 'footer.php';?>

ソースコード

先程のソースのコメントアウトなしバージョン

upload.php
<?php
$msg = null;

if (isset ( $_FILES ['upfile'] ) && is_uploaded_file ( $_FILES ['upfile'] ['tmp_name'] )) {
	$old_name = $_FILES ['upfile'] ['tmp_name'];
	if (! file_exists ( 'upload' )) {
		mkdir ( 'upload' );
	}
	$new_name = date ( "YmdHis" );
	$new_name .= mt_rand ();
	switch (exif_imagetype ( $_FILES ['upfile'] ['tmp_name'] )) {
		case IMAGETYPE_JPEG :
			$new_name .= '.jpg';
			break;
		case IMAGETYPE_GIF :
			$new_name .= '.gif';
			break;
		case IMAGETYPE_PNG :
			$new_name .= '.png';
			break;
		default :
			header ( 'Location: upload.php' );
			exit ();
	}
	$gazou = basename ( $_FILES ['upfile'] ['name'] );
	if (move_uploaded_file ( $old_name, 'upload/' . $new_name )) {
		$msg = $gazou . 'のアップロードに成功しました';
	} else {
		$msg = 'アップロードに失敗しました';
	}
}
?>
<?php require 'header.php';?>
<h1>アルバム作成：画像アップロード</h1>
<p>
<form action="upload_top.php" method="post"
	enctype="multipart/form-data">
	<input type="file" name="upfile"> <input type="submit" value="読み込み"
		name="yomikomi">
</form>
</p>
<?php
if (isset ( $msg ) && $msg == true) {
	echo '<p>' . $msg . '</p>';
}
?>
<a href="upload.php">戻る</a>
<?php require 'footer.php';?>

20170601.png

画像フォルダ内の画像を一覧表示

アルバム

主な流れ★ミ

  1. opendir()でディレクトリを開く
    　 ディレクトリハンドルを作成。
  2. readdir()でファイル名を取得する
    . ディレクトリハンドルをループで回してファイルを取得。
  3. readdir()ではファイル名を一つしか取得しないのでループさせる
  4. ファイル名が「0」とかの可能性を考慮しておく
  5. ファイル名以外にも「.」と「..」が帰ってくるので必要に応じて対応
  6. closedir()でディレクトリハンドルを閉じる

:star:

opendir

opendir(ディレクトリへのパス)
ディレクトリハンドルをオープンする
opendir(ディレクトリへのパス)は引数に指定したフォルダを開き、ディレクトリハンドルを返す。
opendirはフォルダを開くのに成功すると
戻り値としてディレクトリハンドル(フォルダハンドル)を返す。
戻り値⇒ディレクトリハンドル(フォルダハンドル)

　　　　　　
opendir(フォルダ名) 指定したディレクトリをオープンにする/ディレクトリハンドルをオープンにする
ディレクトリハンドル ディレクトリを操作するためのもの

ディレクトリとファイルの違い

　　　　　　
ディレクトリ 中に何かを入れられる
ファイル 中に何も入れられない

readdir

readdir(ディレクトリハンドル名)
開かれたフォルダ直下のファイルを取り出すのは、
readdir関数の役割。

readdir関数はファイル名を全て取得したらfalseを返す。
false以外にも0や空文字を返す可能性がある。
ディレクトリから次のファイルのファイル名を返す。
ファイル名はファイルシステムで格納されている順番で返される。

　　　　　　
readdir ディレクトリハンドルからエントリを読み込む
エントリ 記入(事項)、見出し、登録(者)、参加(者)、出品(物)、入場、入会、入り口、などの意味を持つ英単語

closedir

closedir(ディレクトリハンドル名)
引数で指定したディレクトリハンドルを閉じる
ディレクトリを閉じる

readdirで取得されたファイル名一覧が入った変数をvar_dumpしてみた

screencapture-localhost-picture_upload-album2-php-1496912362499.png

ファイルハンドル

今どのファイルを処理しているかを管理するための名前のこと。
ファイルの読み込みや書き込みをするには、まずファイルを開いてファイルハンドルに関連付けし、そのファイルハンドルを操作するのが基本手順になる。

ディレクトリハンドル

何処のフォルダを開いているかを示すためのもの。
該当ディレクトリ内のファイルアクセス位置を示すもの。
当該ディレクトリ内のファイルアクセス位置を示すもの。
前回アクセスしたファイルの位置が削除しない限り残っている。
あるディレクトリにアクセスしたときに取得(初回は先頭位置のファイル)される。

わからなかったこと

ソースコード

album2.php
<?php
$images = array ();

// albumフォルダをオープンにする
// $handleにディレクトリハンドルが入っている
// opendir(フォルダ名)⇒戻り値ディレクトリハンドル
if ($handle = opendir ( './album' )) {
// readdir(ディレクトリハンドル)⇒指定したディレクトリのファイル一覧を取得する
// ファイル名をどんどん取得する
	while ( $entry = readdir ( $handle ) ) {
		// 現在のディレクトリの.or..を除いた全てのファイル名リストを
		// $imagesに格納している
		if ($entry != "." && $entry != "..") {
// $entry⇒readdirで取得したファイル名が沢山格納されている。
// それを$images配列に格納。
			$images [] = $entry;
		}
	}
	// ディレクトリハンドルをクローズする
	closedir ( $handle );
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm1ns="http://www.w3.org/1999/xhtml">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">


<title>アルバム</title>
<style type="text/css">
<!--
html,body {
	background-color: transparent;
	scrollbar-arrow-color: #ffccff;
	scrollbar-face-color: #ffcccc;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-darkshadow-color: #ffcccc;
	scrollbar-highlight-color: #ff9999;
	scrollbar-shadow-color: #ff9999;
	scrollbar-track-color: #ffffff;
}

-->

p#submit_btn {
	text-align: center;
	font-family: "あずきフォント";
}

.content {
	/* 	margin-left: 137px; */
	margin-top: 0px;
	font-size: 95%;
	font-weight: bold;
	font-family: "あずきフォント";
/* 	color: #6c2735; */
	color: #f3b3e6;
}

.form {
	color: white;
	background-color: #9FD6D2;
	text-align: center;
	/* 	padding-left: 370px; */
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 95%;
	width: 825px;
	font-family: "あずきフォント";
}

.textform {
	margin-left: 68px;
}

.textform_postalCode {
	margin-left: 30px;
}

.textstyle {
	font-size: 95%;
/* 	color: #6c2735; */
	color: #f7c2c2;
	font-weight: bold;
	font-family: "あずきフォント";
}

.required {
	font-size: 87%;
	font-weight: normal;
	color: red;
	font-family: "あずきフォント";
}

# heading {
/* 	border-left: 10px solid #6c2735; */
/* 	border-bottom: medium solid #6c2735; */
 	border-left: 10px solid #6c2735;
 	border-bottom: medium solid #f7c2c2;
 	color: #f7c2c2;
/* 	color: #cc528b; */
	font-family: "あずきフォント";
    -ms-font-feature-settings: "normal";
}
/* 送信ボタン */
input[type="submit"] {
	padding: 10px 20px;
	border: none;
	/*  background: #9FD6D2; */
	background: #f7c2c2;
	color: #fff;
	font-family: "あずきフォント";
}

/* 送信ボタン - マウスオーバー時 */
input[type="submit"]:hover {
	/*  background: #54A9BD; */
	background: #ff9b9f;
	font-family: "あずきフォント";
}

/* 送信ボタン - 押せないとき */
input[type="submit"][disabled] {
	background-color: #ccc;
	cursor: default;
	font-family: "あずきフォント";
}

input.example,select {
	width: 250px;
	font-family: "あずきフォント";
}
.title_a{
	color: #f7c2c2;
	font-weight: bold;
	font-family: "あずきフォント";
}
textarea {
	width: 480px;
	font-family: "あずきフォント";
}
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
/* select{ */
/* 	color: white; */
/* 	background-color: #f3b3e6; */
/* } */
/* カーソルをあてた時に変わる色 */
input:focus,select:focus,textarea:focus {
  	background-color: #f7c2c2;
/* 	background-color: #f2dae8; */
	font-family: "あずきフォント";
	border:solid 1px #cc528b;
}
/*検索ボタン*/
input[type="button"] {
	background: #f7c2c2;
	color: white;
	/*   width: 55px; */
	height: 30px;
	border: 0;
	line-height: 30px;
	font-family: "あずきフォント";
}

input[type="button"]:hover {
	background: #ff9b9f;
	height: 30px;
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: "あずきフォント";
}

input[type="button"].disabled {
	background: #f7c2c2;
	cursor: default;
}

input[type="button"].disabled:hover {
	background: #f7c2c2;
	font-family: "あずきフォント";
}
/* @font-face { */
/* font-family: あずきフォント; */
/* src: url(azuki.ttf) format("truetype"); */
/* 	 url(azuki.woff) format("woff"); /* Modern Browsers */ */
/* } */
@font-face{
    font-family: 'あずきフォント'; /* お好きな名前に */
    src: url('azuki.eot'); /* IE9以上用 */
    src: url('azuki.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
        url('azuki.woff') format('woff'), /* モダンブラウザ用 */
        url('azuki.ttf') format('truetype'); /* iOS, Android用 */
}
.stepBar {
  position: relative;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
  font-family: "あずきフォント";
}
.stepBar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 40px 0 20px;
  background-color: #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.stepBar .step:before, .stepBar .step:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #eee;
  border-left: 4px solid #FFF;
  width: 20px;
  height: 20px;
}
.stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
  content: none;
}
.stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.stepBar .step.current {
  color: #FFF;
  background-color: #6c2735;

  font-family: "あずきフォント";
}
.stepBar:hover{
  background-color:#DEC8B1';
}
.stepBar .step.current:before, .stepBar .step.current:after {
  background-color: #6c2735;
    onmouseover="style.background='#DEC8B1'";
  onmouseout="style.background='#6c2735'";
  	font-family: "あずきフォント";
}
.stepBar.step2 .step {
  width: 50%;
}
.stepBar.step3 .step {
  width: 33.333%;
}
.stepBar.step4 .step {
  width: 25%;
}
.stepBar.step5 .step {
  width: 20%;
}
div.img-move a:hover {
 position: relative;
 top: -1px;
 left: -1px;
}
div.img-move a:active {
 position: relative;
 top: 5px;
 left: 5px;
}
</style>
</head>
<body>
<h1 class="title_a">アルバム</h1>
<p class="textstyle">
<a href="upload2.php">写真をアップロードする</a>
</p>
<?php
// もしファイル名一覧リストが格納された$imagesが0以上だったら
// もしファイル名が$imagesに入っていたら
if (count ( $images ) > 0) {
	// $valueという変数に入れる
	foreach ( $images as $value ) {
		echo '<img src="./album/' . $value . '">';
	}
// もしファイル名が$imagesに入ってなかったら
} else {
	echo '<p class="textstyle">画像はまだありません。</p>';
}
?>
</body>
</html>

ページング処理

array_chunk

　　　　　　
array_chunk(分割したい配列,分割数) 配列を分割する
****
array_chunkの例
$input_array = array('a', 'b', 'c', 'd', 'e','f','g','h','i','j');
var_dump($input_array);
$num = 3;
var_dump(array_chunk($input_array, $num));
var_dumpで表示
array (size=10)
  0 => string 'a' (length=1)
  1 => string 'b' (length=1)
  2 => string 'c' (length=1)
  3 => string 'd' (length=1)
  4 => string 'e' (length=1)
  5 => string 'f' (length=1)
  6 => string 'g' (length=1)
  7 => string 'h' (length=1)
  8 => string 'i' (length=1)
  9 => string 'j' (length=1)

array (size=4)
  0 => 
    array (size=3)
      0 => string 'a' (length=1)
      1 => string 'b' (length=1)
      2 => string 'c' (length=1)
  1 => 
    array (size=3)
      0 => string 'd' (length=1)
      1 => string 'e' (length=1)
      2 => string 'f' (length=1)
  2 => 
    array (size=3)
      0 => string 'g' (length=1)
      1 => string 'h' (length=1)
      2 => string 'i' (length=1)
  3 => 
    array (size=1)
      0 => string 'j' (length=1)

intval

intval() 引数に指定した値を整数値(integer)に変換する関数
intval

count

配列の要素数を取得する

  • 多次元配列はカウントされない_________________________________
    ・デフォルトだと、多次元配列の場合、
    一次元の要素のみがカウントされます。
$imagesをvar_dump
array (size=3)
  0 => 
    array (size=3)
      0 => string '20170209.png' (length=12)
      1 => string 'aikon171.gif' (length=12)
      2 => string 'haneg3.gif' (length=10)
  1 => 
    array (size=3)
      0 => string 'hanem4.gif' (length=10)
      1 => string 'hanep3.gif' (length=10)
      2 => string 'i-_-_dora13.gif' (length=15)
  2 => 
    array (size=1)
      0 => string 'searchlogo.png' (length=14)
var_dump(count($images));したら
int 3

とでた

album-2.php
<?php
  $images = array();  // 画像ファイル名のリストを格納する配列
  $num = 3; // 1ページに表示する画像の枚数

  // 画像フォルダから画像ファイル名を読み込む
  if ($handle = opendir('./upload2')){
    while ($entry = readdir($handle)){
      // 「.」および「..」でないとき、ファイル名を配列に追加
      if ($entry != "." && $entry != ".."){
        $images[] = $entry;
      }
    }
    closedir($handle);
  }
?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>交流サイト：アルバム</title>
</head>
<body>
  <h1>交流サイト：アルバム</h1>
  <p>
    <a href="index.php">トップページに戻る</a>
    <a href="upload-2.php">写真をアップロードする</a>
  </p>
  <?php
    if (count($images) > 0){
      // 指定枚数ごとに画像ファイル名を分割
      $images = array_chunk($images, $num);
      // ページ数指定、基本は0ページ目を指す
      $page = 0;
      // GETでページ数が指定されていた場合
      // URLを書き換えて、文字列が送られてくることもあるから、
      // 対策として送られてきた値が$_GET['page']で数字であるかチェックしている
      if (isset($_GET['page']) && is_numeric($_GET['page'])){
        $page = intval($_GET['page']) - 1;
        if (!isset($images[$page])){
          $page = 0;
        }
      }

      // 画像の表示
      foreach ($images[$page] as $img){
        echo '<img src="./upload2/' . $img . '">';
      }

      // ページ数リンク
      echo '<p>';
      for ($i = 1; $i <= count($images); $i++){
        echo '<a href="album-2.php?page=' . $i . '">' . $i . '</a>&nbsp;';
      }
      echo '</p>';
    } else {
      echo '<p>画像はまだありません。</p>';
    }
  ?>
</body>
</html>
<?php
var_dump(count($images));
var_dump($images)
?>

screencapture-localhost-test-album-2-php-1497317639800.png

count

58
86
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
58
86

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?