2008年11月4日火曜日

(suz-php-jquery) jqUploaderクライアント(HTML/JavaScript)編

スズキです。

Webアプリケーション開発では、当然、
ファイルアップロード機能も必須なわけで、
suz-php-jqueryではどうしよう?といろいろ考えたのですが、
以前、いろいろ調査して使ったことのある、
jqUploaderを利用することにしました。
http://www.pixeline.be/experiments/jqUploader/

まずはクライアント側(HTML/JavaScript)です。

--------【HTML】--------
<head>
  <script type="text/javascript"
    src="../JS/ext/jquery.js"></script>
  <script type="text/javascript"
    src="../JS/ext/flash.js"></script>
  <script type="text/javascript"
    src="../JS/ext/jquploader.js"></script>
  <script type="text/javascript"
    src="../JS/app/example/uploader.js"></script>
</head>
<body>
  <form>
    <div id="uploader">
      <label for="upload_file">Choose</label>
      <input name="MAX_FILE_SIZE" type="hidden"
        value="100000000" />
      <input name="upload_file" id="upload_file" type="file" />
    </div>
  </form>
</body>
--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/example/uploader.html

--------【HTML】--------
$("#uploader").jqUploader({
  uploadScript : "../../../PHP/uploader.php?name=aaa",
  src : "../IMG/app/example/jquploader.swf",
  afterScript : "",
  background : "FFFFDF",
  barColor : "64A9F6",
  allowedExt : "*.jpg; *.jpeg; *.gif; *.png",
  allowedExtDescr: "Images (*.jpg; *.jpeg; *.gif; *.png)"
});
TerminateJQUploader = function(containerId, filename, varname){
  alert(containerId);
  alert(filename);
  alert(varname);
}
--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/JS/app/example/uploader.js

パラメータは直感的だと思うので、
具体的なことは本家のドキュメントを参照です。
http://www.pixeline.be/experiments/jqUploader/doc.php

ポイントは、
▼uploadScriptにGETパラメータをつけることができる
http://suz-lab.blogspot.com/2007/12/jquploaderflash.html
▼TerminateJQUploaderがファイルアップロード完了イベント
http://suz-lab.blogspot.com/2007/12/jquploader.html
といった感じでしょうか?

あと、afterScriptは""にしておかないと、ファイルアップロード完了後、
別ページ(null)に遷移しようとしてしまうので、注意です。

次は、サーバ側(PHP)だ!

--
http://suz-lab.blogspot.com/

0 コメント: