今更ながらjQueryにハマってまして、今日も画面遷移なしで画像がアップロードできるスクリプトを書こうとしたのですが、Javascriptではfileをpostできないことに気付いた＞＜
で、画面遷移なしでファイルをアップロードしようと思ったらiframeを使ったりするらしい。Ajaxではないけど、Ajaxっぽい動きですな。
ということでサクっと書いてみた
アップロード用ページ upload.html
<html>
<head>
<style>
#dummy{
/* display:none; するとSafariだとおかしくなるらしい？ */
border:0px;
width:0px;
height:0px;
}
#image{
display:none;
max-width:480px;
}
</style>
</head>
<body>
<iframe name="dummy" id="dummy"></iframe>
<div id="message"></div>
<img id="image"></div>
<form action="upload.php" method="post" target="dummy" enctype="multipart/form-data">
<input type="file" name="img" />
<input type="submit" value="Upload">
</form>
</body>
</html>注意点はiframeにdisplay:none;するとSafariだとおかしくなるらしいんだけど、ウチの環境では別にどっちでも行けた(Mac OSX 10.6.6, Safari 5.0.3)
http://groundwalker.com/blog/2007/02/file_uploader_and_safari.html
ファイルアップロード処理とか upload.php
<?php
$error = 0;
$msg = "";
$filename = "";
if ($_FILES["img"]["error"] == 0) {
$info = getimagesize($_FILES['img']['tmp_name']);
if ($info[2] != 2 && $info[2] != 3 && $info[2] != 6) {
$msg = "画像ファイルでお願いします。";
$error++;
} else {
$exts = array(2 => '.jpg', 3 => '.png', 6 => '.bmp');
$ext = $exts[$info[2]];
$filename = "tmp/hoge".$ext;
move_uploaded_file($_FILES["img"]["tmp_name"], $filename);
chmod($filename, 0666);
$msg = "ファイルをアップロードしました。";
}
} else {
$msg = "ファイルのアップロードに失敗しました。";
$error++;
}
// jsonで出してeval
$results = sprintf('{"error":"%s","msg":"%s","filename":"%s"}', $error, $msg, $filename);
?>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$('document').ready(function(){
var results = eval('(<?php echo $results;?>)');
// 親ウィンドウのオブジェクトはwindow.parent.documentってやったらとれる
$('#message', window.parent.document).html(results["msg"]);
if (results["error"] == 0) {
$('#image', window.parent.document).css('display', 'block').attr('src', results["filename"]);
}
});
//]]>
</script>
</head>
<body>
</body>
</html>別にこの程度ならjQuery使う必要は全然ないんですけどねw
フツウに書いてもコード量は変わらんですw
ポイントはjQueryでiframeから親windowのDOM要素を操作する場合は
$(‘対象のidとか’, window.parent.document)
ってやるとできる。
素のjavascriptで書いた
parent.document.getElementById(“対象のid”)
とほぼ一緒かな。