[JavaScript]inputでファイル選択後即時アップ

inputでファイル選択後即時アップ。
[Twitter]tweet with mediaでも実装していました。jQuery.uploadを使います。
Sample ※Firefox,IE8,9で動作確認済

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>ファイル選択後即時アップ</title>
<meta name="description" content="****">
<meta name="keywords" content="****">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.upload-1.0.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form method="post" action="" target="f1" enctype="multipart/form-data">
	<input id="filebox" type="file" name="image" size="0" accept="image/*"/>
</form>
<ul id="preview"></ul>
</body>
</html>

script.js


$(function(){   
	set_thumaction();
});
function remove_thum(){
	$('#preview').empty();
}
function set_thumaction(){
	$('#filebox').change(function() {
		var preview = $('#preview');
		$(this).upload('upload.php',$("form").serialize(),function(html){
			preview.append(html);
		},'html');
	});
}
function form_tweetmode(){
	$('#filebox').remove();
	$('form').attr('enctype','application/x-www-form-urlencoded');
}
function restore_form(){
	$('#fileboxwrap').html('<input id="filebox" type="file" name="image" size="0">');
	$('form').attr('enctype','multipart/form-data');
	set_thumaction();
}

upload.php

<?php
if(isset($_FILES["image"])){
	deleteFilesOfDir('./tmp');
	$html='<li>';
	$v=$_FILES["image"];
	$ext=end(explode('.', $v["name"]));
	$filename='./tmp/'.time().'.'.$ext;
	$result = @move_uploaded_file( $v["tmp_name"], $filename);
	if($result){
		$html .= '<img src="'.$filename.'" width="300"/><br/>';
	}else{
		$html .= 'エラー<br/>';
	}
	foreach($_FILES["image"] as $key => $v){
		$html .= $key.' : '.$v.'<br/>';
	}
	$html .= '</li>';
	echo $html;
}
function deleteFilesOfDir($dirPath){
	if (!isset($dirPath)) {
		return;
	}
	$res_dir = opendir($dirPath);
    while( $file_name = readdir( $res_dir ) ){
    	if (is_dir($dirPath.'/'.$file_name)) {
    		continue;
    	}
        unlink($dirPath.'/'.$file_name);
    }
    closedir($res_dir);
}
?>

jQuery.upload
http://lagoscript.org/jquery/upload

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

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>

[iOS6]Safariでinput type=”file” #2

iOS6のSafariからformのinput type=”file”に対応しているので試しました。#2
Safariでinput type=”file” #1と違うところは写真だけ選ばせる点
Sample

sc00
formを作ると左のように表示される。

sc01
写真[ファイルを選択]をタップしたところ

sc02
写真を選択したところ

sc03
動画[ファイルを選択]をタップしたところ

sc04
動画を選択したところ

sc05
[送信]をタップして遷移したところ

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>sample00</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">
	<label>写真</label><input type="file" name="selectedPhoto" accept="image/*">
	<br/>
	<br/>
	<label>動画</label><input type="file" name="selectedMovie" accept="video/*">
	<br/>
	<br/>
	<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>sample00</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["selectedPhoto"])){
	if($_FILES["selectedPhoto"]["error"]==0) {
		$ext=end(explode('.', $_FILES["selectedPhoto"]["name"]));
		$filename='./test.'.$ext;
		$result = @move_uploaded_file( $_FILES["selectedPhoto"]["tmp_name"], $filename);
		if($result){
			echo '<img src="'.$filename.'" width="300"/><br/>';
		}else{
			echo 'エラー<br/>';
		}
	}elseif ($_FILES["selectedPhoto"]["error"]==1) {
		echo 'ファイルサイズが大きすぎます。';
	}
	foreach($_FILES["selectedPhoto"] as $key => $v){
		echo $key.' : '.$v.'<br/>';
	}
}
?>
<br/><hr><br/>
<?php
if(isset($_FILES["selectedMovie"])){
	if ($_FILES["selectedMovie"]["error"]==0) {
		$ext=end(explode('.', $_FILES["selectedMovie"]["name"]));
		$filename='./test.'.$ext;
		$result = @move_uploaded_file( $_FILES["selectedMovie"]["tmp_name"], $filename);
		if($result){
			echo '<video src="'.$filename.'"></video> ';
		}else{
			echo 'エラー<br/>';
		}
	}elseif ($_FILES["selectedMovie"]["error"]==1) {
		echo 'ファイルサイズが大きすぎます。';
	}
	foreach($_FILES["selectedMovie"] as $key => $v){
		echo $key.' : '.$v.'<br/>';
	}
}
?>
</body>
</html>

[CakePHP 2.x]form->radioのvalue値を指定する。

form->radioのvalue値を指定する。

<?= $this->Form->create('samples', array('type' => 'post', 'action' => 'sample1')); ?>
<ul class="info-list">
    <li>
        <label class="radio">
<?php
$options = array('value1'=>'ラベル1','value2'=>'ラベル2','value3'=>'ラベル3','value4'=>'ラベル4');
$attributes = array("legend" => false,
                    'label'=> false,
                    'separator'=>'</label></li><li class="radio"><label class="radio">',
                    'value'=>'value1'
                    );
echo $this->form->radio('radioGroup1', $options, $attributes);
?>
        </label>
    </li>
</ul>
<div class="textcenter margin-top1"><button type="submit" class="btn btn-wide3">submit</button></div>
<?= $this->form->end() ?>

サンプル

[PHP]preg_replaceで複数の文字列置換

preg_replaceで複数の文字列置換

<?php
$string='ABC DEF GHI JKL MNO ABC DEF GHI JKL';
$pattern=array("/ABC/","/DEF/","/MNO/");
$replace=array('あいう','えおか','ほげ');
$result=preg_replace($pattern, $replace, $string);
echo $result;
?>

結果

あいう えおか GHI JKL ほげ あいう えおか GHI JKL

サンプル