ファイルをアップロード (jQuery.upload)

21 6月

(text by kondo)

オーサリングツールの方ですが、画像のファイルや、SCORMファイルをアップロードする機能が必要です。flash のときには、とくに何もせずに flash の機能で可能でしたが、HTMLとjavascriptでは、もともとあるformの機能では、画面が切り替わってしまいます。それでは不都合なので、jQueryのプラグイン(jQuery.upload)を利用することにしました。下記は参考サイトです。

http://lagoscript.org/jquery/upload

とりあえず、jQueryの後にスクリプトを読み込みます。

<script src=”jquery/jquery.js” type=”text/javascript”></script>
<script src=”jquery/jquery.upload-1.0.2.js” type=”text/javascript”></script>

ファイルを指定するところ(form)は下記。先にjavascriptを書きました。その後にアップするファイル名を指定する formを書いています。input には ifName という id が付いています。ifNameの変化をとらえて、スクリプトがスタートします。demo.php はファイルを受け取るプログラムです。foldernameというテキストも一緒に渡しています(これは、このプログラム固有の話です)。

<script type=”text/javascript”>
$(function() {
$(‘#ifName’).change(function() {
$(this).upload(‘./demo.php’,{‘foldername’:sessionStorage.foldername}, function(res) {
alert(res);
}, ‘text’);
});
});
</script>

<input id=”ifName” type=”file” name=”file” size=”29″ style=”position: absolute; left:60px; top: 634px; font-size:14px; height:24px; width:255px; ” >

 

demo.phpは下記のようになっています。返事(テキストデータ。中身はXML)を返します。

<?php

$filename = basename($_FILES[‘file’][‘name’]);
$foldername = $_POST[‘foldername’];

$tmpxml = “”;

if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], “/var/www/html/temporary/$foldername/” . $filename)) {
$tmpxml = “<filename>”.$filename.”</filename>\n”;
} else {
$tmpxml = “<filename>Failed to save</filename>\n”;
}

$tmpxml = $tmpxml.”<foldername>”.$foldername.”</foldername>\n”;

$xml4return = <<< end_of_quote
<?xml version=”1.0″ encoding=”utf-8″?>
<root>

$tmpxml
</root>
end_of_quote;

echo $xml4return;
?>

とりあえず、これぐらいで。