勉強したことのメモ

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
CSVファイルを使って郵便番号から住所を抽出する

■ソース <? error_reporting(E_ALL & ~ ...

images
Fatal error: [] operator not supported for stringsの対処

Fatal error: [] operator not supported f ...

images
短縮URL作成(管理画面)2

<? /* 編集機能追加。もっと短く記述できるようにする。 */ erro ...

other
incファイルとかtplファイルとか

初めて見るサーバーのファイルを見ていると incファイルとかtplファイルとか見 ...

images
PHP7が2015年11月にリリースされるらしい

PHP7で変わること ——言語仕様とエンジンの改善ポイント from Yoshi ...

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

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

images
PHPでURLを解析してクエリを抽出する方法

formからGETでURLの文字列を送信したものを、受信した側でクエリ部分のみ抽 ...

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

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

images
PHPでログファイルから指定行数表示させる

エラーログを最新分から指定行数表示させる プログラムがあって、どういった作りにな ...

jquery_logo
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...