ajaxでのファイルアップロード

もう定番化しているかも知れないけど　ajaxに対応したファイルアップロード

インラインフレームを使用すると簡単に出来ます。

まずはアップロードするほうのHTMLファイルは以下のとおり！

<html>
<head>
　　　　
　　　　<script　type="text/javascript"　src="mootools/core.js"></script>
　　　　<script　type="text/javascript"　src="mootools/more.js"></script>

　　　　<script　type="text/javascript">
　　　　　　　function　GetFile(fname,　fsize){
　　　　　　　　　　　if(fname){
　　　　　　　　　　　　　　$("show").innerHTML　="ファイル名："+fname+"<br　/>ファイルサイズ："+fsize+"バイト<br　/>";
　　　　　　　　　　　}
　　　　　　　}
　　　　　　　window.addEvent('domready',　function(ev){
　　　　　　　　　　　$('now').innerHTML　=　(new　Date).toString();
　　　　　　　　　　　$('fileup_link').addEvent('click',function(event){
　　　　　　　　　　　　　　　event.stop();
　　　　　　　　　　　　　　　var　control　=　$("craft_fileupload_field");
　　　　　　　　　　　　　　　if(control　&&　control.focus){
　　　　　　　　　　　　　　　　　　　$("show").innerHTML　+=　"fire!　";
　　　　　　　　　　　　　　　}
　　　　　　　　　　　});
　　　　　　　　　　　var　fform　=　$('craft_fileupload_form');
　　　　　　　　　　　$('craft_upload_file').addEvent('change',function(event){
　　　　　　　　　　　　　　　fform.submit();
　　　　　　　　　　　});

　　　　　　　　　　　$('fileup_link').addEvent('click',function(event){
　　　　　　　　　　　　　　　event.stop();
　　　　　　　　　　　　　　　$('craft_upload_file').click();
　　　　　　　　　　　});
　　　　　　　　});
　　　　</script>

</head>
<body>
　　　　<div　id="now"></div>
　　　　<div>
　　　　　　　　<a　id="fileup_link"　href="craft/upload/field_name">ファイルアップロード</a>
　　　　</div>
　　　　<div　id="show"></div>
　　　　<hr　/>

　　　　<form　id="craft_fileupload_form"　onsubmit="return　false"
　　　　　　　　enctype="multipart/form-data"　method="post"
　　　　　　　　target="craft_fileupload_iframe"　accept-charset="utf-8"　action="./fileupload_iframe.php">
　　　　　　　　<input　type="file"　id="craft_upload_file"　name="uploadfile"　/>
　　　　</form>
　　　　<iframe　src="./fileupload_iframe.php"　name="craft_fileupload_iframe"　style="width:500px;height:100px;">
　　　　</iframe>
</body>
</html>

インラインフレームのPHPファイルは次のとおり

<?php
　　　　/*　ファイルを取得するPHPの何らかの処理　省略します！*/
　　　　
　　　　$file_exists　=　(bool)ファイルを取得できたかどうが

?><html>
<head>

　<meta　content="text/html;　charset=UTF-8"　http-equiv="content-type"　/>
　<script　type="text/javascript">
　　　function　setInfo(){
　　　　　　　　　　　　<?php　if($file_exists):　?>
　　　　　　　　　　　　window.parent.GetFile('<?php　echo　$fname;　?>',　<?php　echo　$fsize;　?>);

　　　　　　　　　　　　<?php　else:　?>
　　　　　　　　　　　　window.parent.GetFile();
　　　　　　　　　　　　<?php　endif;?>
　　　　　　　　　　　　document.getElementById('time').innerHTML　=　(new　Date).toString();
　　　　　　　　}
　　　　</script>
</head>
<body　onload="setInfo();">
<?php　
　　if($file_exists){
　　　echo　'ファイルをアップロードしました';
　　}else{
　　　echo　'ファイルをアップロードできませんでした';
　　}

?>
　<div　id="time"></div>
</body>
</html>

リンクをクリックするとファイルを選択するダイアログが出ます。
選択するとすぐにアップロード！
その結果を親フレームに通知します。