開発メモ,主に補足by子連れ親父プログラマー

2010-09-11

jQuery、Form Plugin を使って、file upload する、ファイルを選択したら自動でその画像が表示されるようにする

まあ、とにかくファイルアップロード系のプラグインってのはあるようでないようで、これというのがない。
もう探し疲れたよ、ほんとに。
ファイルのアップロードのインターフェースはこういうのがいいんだ、っていう部分で人によって意見が違いすぎるんだよな、結局。
だから作者によって考えてることが全然別々で。
ということで、一番シンプルで、機能がなくて、ただアップロードできるだけ、というものを考えてみた。
まず、HTML側はこうする。
<form id="upload" method="post" action="form.php" >
  <input type="file" name="sample" id="sample" />
  <img id="sample_img" src="img/sample.jpg">
</form>
sample.jpg はデフォルトの画像で用意してあって、最初から表示されているんだけど、ファイル参照で別の画像を選べばそれに置き換わる、というようなものを作ろうってことだ。

まず、
http://www.malsup.com/jquery/form/
こちらから Form Plugin を入手して、読み込む。
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
で、ファイル選択したらファイルアップロードをする php に処理を渡せばいいので、
$(document).ready(function() {
  $("input#sample").change(function(){
    var options = { 
      url:       'upload.php',
      dataType:  'xml', 
      success:   processXml 
    }; 
    $('form#upload').ajaxSubmit(options); 
  });
});
こんな感じに書く。中味は全部 form プラグインの記述。dataType で xml を選ぶのが味噌だ。
json にすると動かないので注意。
ajaxSubmit で form の action 先を upload.php に変更して、自動でサブミットしてくれる。

ということなので upload.php を書く。
いや、これはまあ、普通に $_FILES を使ったファイルアップロード処理を php で書けばいいだけなので詳細は略。
普段自分が使ってるやつでやってくれ。
なんやかんや処理した後に、
header('Content-type: text/xml'); 
echo <<<END
<root>
  <status>$status</status>
  <file_path>$file_path</file_path>
  <emes>$emes</emes>
</root>
END;
というように xml で結果を返す。上記では $status に成功したかどうか、$file_path にアップロードした画像を保存したファイルのパス、$emes にエラーメッセージ、を格納しているつもりである。

で、アップロードに成功すると
success:   processXml 
とあるように、processXml に処理が渡るので、processXml をごりごり書く。
function processXml(responseXML) {
  var status = $('status', responseXML).text();
  if (status == 'success') {
    var file_path = $('file_path', responseXML).text(); 
    $('#sample_img').attr('src', file_path);
  } else {
    var emes = $('emes', responseXML).text();
    alert(emes);
  }
}
xml のデータは
$('status', responseXML).text()
というような書き方で取得できる。
ので、jQuery の .attr を使って画像のパスを書き換える。
$('#sample_img').attr('src', file_path);
これでオッケーだ。
あとは好きなようにいじればよしと。

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー