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の方は登録時間を取得して
つける形。
関連記事
-
-
ダウンロード無しで外部ファイル呼び出し
■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が読み ...
- PREV
- クロスドメイン突破をjavascriptで行う
- NEXT
- jQueryで電話番号チェック