HTMLのFormでファイルを送りたいけど

17 1月

HTMLとjavascriptでファイルをアップロードしたいのですが,通常だと表示されている画面が切り替わってしまいます。この対策に下記のjqueryプラグインを利用しました。

http://lagoscript.org/jquery/upload

このjQuery.uploadで,ファイルと一緒にテキストも渡せます。$_FILESでファイルも利用できますし,$_POSTにもきちんとテキストデータが入っていました。関数は下記のような感じで利用します。

$("あるinput type="fileを指定").upload('URLサイト',
{'何かのkey', '渡したいstring'},
function(返事) {返事に応じて何か処理},'返事の種類 text, xml, json など');

ファイル名を指定するinputタグは下記のような簡略なもので良いようです。formタグで挟んでいなくても良いようでした。

<input id="this_name" type="file" name="the_filename" size="20">

最初は,html の formの持つ機能を利用してアップロードしようとしていました。これでは上手く行きませんでしたが,formに記入したテキストを送るだけなら何とかなります。画面が切り替わってしまうのをとめるために下記のようにします。

<script type="text/javascript">
function donot() {
return false;
}
</script>

<form name="the_form"  action="#" onSubmit="return donot();"
method="post" >

<input 何か送りたいもの >
<input type="submit" name="submit" value="送信" >

</form>

action=”#”はリンク先をそのページ自身に設定しますが,ここではsubmitボタンを押したイベントを引っ掛けて,ファンクションを実行します(上記ソースではファンクションの中身はありませんけど)。そのファンクションが上記のようにfalseを返すようにしておけば,actionの記述は無視されます。