ktyr report

HTML5

[html]aタグからGoogleMap起動

HTML5

2015-05-27

aタグからGoogleMap起動
サンプル

<a href="http://maps.google.com/maps?q=45.522918,141.936592">GoogleMapで見る</a>

[HTML5]input

HTML5

2015-03-04

input
HTML5で追加されたtype

search
tel
url
email
date
month
week
time
number
range
color

サンプル

見た目(pc firefox)

見た目(iOS7.1.1)

iOS7.1.1での入力時のキーボード

search

tel

url

email

date

month

week
使用不可

time

number

range
キーボードは出現しない

color
使用不可

[HTML5]inputで複数ファイルのアップロード

HTML5

2013-04-28

inputで複数ファイルのアップロード。
IE9は未対応 omg!
Sample

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>html5によるファイル複数アップロード</title>
<meta name="description" content="****">
<meta name="keywords" content="****">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data">
    画像複数選択<input type="file" name="image_file[]" multiple="multiple" accept="image/*"/>
    <input type="submit"/>
</form>
</body>
</html>

upload.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>html5によるファイル複数アップロード</title>
<meta name="description" content="****">
<meta name="keywords" content="****">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<?php
if(isset($_FILES["image_file"])){
	$i=0;
	$data=getReformFilesData();
	foreach ($data as $v) {
		$ext=end(explode('.', $v["name"]));
		$filename='./test'.($i++).$ext;
		$result = @move_uploaded_file( $v["tmp_name"], $filename);
		if($result){
			echo '<img src="'.$filename.'" width="300"/><br/>';
		}else{
			echo 'エラー<br/>';
		}
		foreach($v as $key => $v2){
			echo $key.' : '.$v2.'<br/>';
		}
		echo '<hr><br/>';
	}	
}
function getReformFilesData(){
	if(isset($_FILES["image_file"])){
		$t=array();
		$i=0;
		foreach ($_FILES["image_file"] as $key=>$list) {
			foreach ($list as $no => $v) {
				$t[$no][$key]=$v;
			}
		}
		return $t;
	}else{
		return array();
	}
}
?>

</body>
</html>