勉強したことのメモ

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

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

   

やりたい事は、

・<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="https://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の方は登録時間を取得して

つける形。

 - PHP, jQuery, 画像

  関連記事

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

preg_matchについて

PHPでのpreg_matchについて教わることがあったのでメモ。 ■参考サイト ...

PHPページングテンプレ

使いやすいのがあったのでメモ。   $page            ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

PHPで配列を値で検索、破棄

PHPの配列で特定の値が入っていれば それを破棄したいということがあった。 ・u ...

迷惑メール対策でフォームにreCAPTCHAを導入する方法

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

フォームデータを一気に取得

<? error_reporting(E_ALL & ~E_NOT ...

同一サーバの別ディレクトリでセッション振り分け

同じサーバ内にmemberとownerの別ディレクトリがあり、それぞれにsess ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...