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);これでオッケーだ。
あとは好きなようにいじればよしと。