jQueryで.postしようと思ったらfileはpostできない件

今更ながら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”)
とほぼ一緒かな。

Filed under: Javascript,PHP,Programming — maesan 9:15 PM

document.getElementById('hoge')

JavascriptとかprototypeとかjQueryとかのメモ


//javascript
var obj = document.getElementById('hoge');
//prototype
var obj = $('hoge');
//jQuery
var obj = $('#hoge').get(0);
//↓コレでもおk
var obj = $('#hoge')[0];
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford オライリージャパン 売り上げランキング: 2308
おすすめ度の平均: 5.0

5 遠回りを避けたい人へ5 手っ取り早く習得5 痒いとこだけ掻いてくれる5 JavaScriptを勉強しなおすのにとってもよいです。5 JavaScript コアに関する最高の本

Filed under: Javascript — maesan 3:16 PM
 iTunes Store(Japan)
 iTunes Store(Japan)
 iTunes Store(Japan)
 iTunes Store(Japan)
 iTunes Store(Japan)