勉強したことのメモ

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, 画像

  関連記事

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

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

PHPでCSVファイルを作って開くと「SYLKファイルが云々」のアラートが出た

データベースのログを整形してCSVファイルを生成し、ダウンロード及びエクセルで開 ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

PHPでコマンドを実行して画像を加工

PHPで画像をリサイズしたりサムネイルを作ろうとすると、 ソースが長くなって面倒 ...

PHPのswitch文で比較演算子の使用

switch文は指定の変数が、特定の値もしくは文字列 だった場合のみに使うような ...

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

javascriptでHTML内に関数を書きたい場合

ダイアログ確認したいだけでわざわざfunctionを 書くのもアレだという時に使 ...

PHPで多次元連想配列のキーを指定してソート

やりたかった事は、 ・多次元配列があってcodeというキーでソートしたい という ...

Cookieをできるだけ長い期間保存する方法

あるシステムの中でCookieを可能な限り長い期間保存したいというリクエストを受 ...

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...