勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQuery.uploadでリアルタイムプレビュー

      2014/07/02

やりたい事は、

・<input type="file">で画像を選択した際にサムネイルを表示させたい
・サムネイル用アップロードと、submit時のアップロードが必要
・サムネイル用アップロードは即時アップロード

というもの。

出来ればローカルファイルを参照する形にしたく、

■参考サイト
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

上記ページで大体やりたかった事は達成できたけど、
残念なことにIE8,9ではFireAPIは対応しておらず。

なので、サーバーにajaxでアップして返り値でURLを
取得しjQueryで画像を出すという方法を考えた。

■画像アップ側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
<script type="text/javascript">
$(function() {
$('#upload_button').click(function() {
$('#file_id').upload('upload.php', function(res) {
$(res).insertAfter(this);
}, 'html');
});
});

function image_upload(){ //即時アップ
$('#file_id').upload('upload.php', function(res) {
$(res).insertAfter(this);
}, 'html');
}
</script>
<title>画像アップロードテスト</title>
</head>
<body>
<h1>画像アップロードテスト</h1>
<input type="file" name="upload_file" id="file_id" onchange="image_upload();"></br>
<input type="button" value="upload" id="upload_button">
</body>
</html>

■画像受け取り側
<?php
function makeRandStr($length) {
$r_str = '';
$str = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z"'));
for ($x = 0; $x < $length; $x++) {
$r_str .= $str[rand(0, count($str)-1)];
}
return $r_str;
}
define('FILE_PATH','aaa/image1/');
if (!is_uploaded_file( $_FILES['upload_file']['tmp_name'])) {
echo '<div>ファイルが選択されていません。</div>';
exit();
}
$image_name = makeRandStr(5);
move_uploaded_file($_FILES["upload_file"]["tmp_name"], FILE_PATH . $image_name . '.jpg');
echo '<br><img src="./image1/' . $image_name . '.jpg" width="100px" height="100px;">';
?>

■その他
同じディレクトリにimage1フォルダを作っておく。
骨格としてはこんな感じでいけそう。
理想は本ちゃんアップ時に、サムネイル用の画像は
消しとくのがよさそう。

定期的にフォルダ内の画像削除ってのもやってみたい。
時間見つけて調べる。

//2013/05/22追記

画像アップ⇒url返してもらう⇒プレビューする際に

社内専用ページではあるけど、同じURLが送られてくるということがあった。

しかもfirefox,IEのみ。chromeは問題なし。

結論はキャッシュの可能性ありで、urlに登録時間をクエリでつける

ことで改善された。

aaa.jpg?time=~~~みたいな感じでtimeの方は登録時間を取得して

つける形。

 - jQuery, PHP, 画像

  関連記事

images
時間と数字のフォーマット

教わったのでメモ。 ・時間の整形 strtotime() 例) $ymd = ' ...

images
JSONをPHPで扱う

JSONデータはjavascriptで扱うものと思ってたけど、 PHPでも使える ...

jquery_logo
jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jquery_logo
ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

jquery_logo
submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

url
CodeigniterでCSSやJSファイルを読み込む

CodeigniterでCSSやJSファイルを読み込みたかった。また、それをヘッ ...

images
独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

images
PHPでソーシャル(SNS)ログインする方法2018

久しぶりにソーシャル(SNS)ログインを実装する機会があった。以前に対応方法を書 ...

images
PHPでフォームとかの数値チェック

フォームとかで届いた値が整数値で0以上かどうか 調べる際に、なるほど、と思ったソ ...

images
PHPでファイルを添付してメール送信

PHPでファイルを添付の上、メールを送信したかった。方法を探したところphpma ...