勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/12  PHP jQuery

やりたい事は、

・<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のプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...