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