jQueryの最近のブログ記事

2008年7月28日

jQueryで画像をアップロード

jQueryのプラグインjqUploaderを使用すると、jQuery経由で画像アップロードできます。
基本的に表側はFlashを使っていて、裏側はPHPです。
jQueryは非同期通信のところだけでしょうか...？手軽にスグ実装したい方にオススメかな。

以下でプラグイン・デモ一式入手できます。
jqUploader

簡単なサンプルは以下の構成で動きます。
  • index.html
  • jqUploader.swf
  • style.css
  • jquery-1.2.1.min.js　・・・　jqueryバージョン1.2.1（最新版では動きませんでした）
  • jquery.flash.js　・・・　swfobject.jsのjquery版
  • jquery.jqUploader.js
  • flash_upload.php
  • files　・・・　保存用ディレクトリ

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqUploader demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#example3").jqUploader({background: "FFFFDF",barColor: "FF00FF"}); 
});
</script>
</head>
<body>

<form id="myUploadForm" enctype="multipart/form-data" action="flash_upload.php" method="POST" class="a_form">
<fieldset>
<legend>Your file</legend>
<ol>
<li class="jqUploader">
<label for="example3">Choose a file to upload: </label>
<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
<input name="example3"  id="example3"  type="file" />
</li>
</ol>
</fieldset>
<input type="submit" name="submit" value="Send" />
</form>

</body>
</html>

プレビュー　|　ソース

2008年7月28日 05:05 PM trackbacks(0) comments(0)
2008年7月11日

jQueryでRSSを読み込む

久々の更新ですが、jQueryネタを。

お持ちでない方は以下、ダウンロードページで。
http://docs.jquery.com/Downloading_jQuery#Download_jQuery

jQuery単体ではxmlの解析ができないようなので、jFeedなるものを使用します。
jFeed: JavaScript jQuery RSS/ATOM feed parser plugin

ファイルを開くといっぱい入っていますが、とりあえず「build/dist/jquery.jfeed.pack.js」だけで動くようです。もちろん「jquery.js」も必要ですが。

外部サイトのRSSを取得して表示する場合は、内包されている「proxy.php」も使用します。
すごく簡単で便利です。

SOURCE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jfeed.pack.js"></script>
<script type="text/javascript">
<!--
function initRSSFeed(){
    jQuery.getFeed({url:'proxy.php?url=http://http://images.apple.com/jp/main/rss/hotnews/hotnews.rss',success:onComplete});
    function onComplete(feed) {
        var temp = '<table>';
        for(var i = 0; i < feed.items.length; i++) {
            var item = feed.items[i];
            temp += '<tr><th class="feedDate">'+changeDate(item.updated)+'</th>';
            temp += '<td align="left" class="feedTitle">';
            temp += '<a href="' + item.link + '">' + item.title + '</a>';
            temp += '</td>';
            temp += '</tr>';
        }
        temp += '</table>';
        jQuery('#news').append(temp);
    }
}
//日付表記を変換
function changeDate(str){
    var myDate=new Date(str);
    var YYYY=myDate.getFullYear();
    var MM=myDate.getMonth()+1;
    if(MM<10){MM="0"+MM;}
    var DD=myDate.getDate();
    if(DD<10){DD="0"+DD;}
    var date=YYYY+"/"+MM+"/"+DD;
    return date;
}

//-->
</script>
<style type="text/css">
a:hover{
    text-decoration:none;
}
#news{
    margin:0 auto;
}
.feedDate{
    padding:3px;
    font-size:x-small;
}
td.feedTitle{
    padding:3px;
    font-size:x-small;
}
</style>
</head>
<body onLoad="initRSSFeed();">
    <div id="news"></div>
</body>
</html>

プレビュー
2008年7月11日 03:28 PM trackbacks(0) comments(0)
« Google Maps | メインページ | アーカイブ | js »

検索

2010年11月

日 月 火 水 木 金 土
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        

カテゴリ

タグクラウド

月別 アーカイブ

twitter