複数ファイルアップロードはAjaxなら可能でしょうか？

質問

http://filepost.ddo.jp/fp30/upload_page.html
でやっている、複数ファイルアップロードをしたり、
アップロードの進捗状況を表現したいのですが、Flashではないようです。
これはAjaxなのでしょうか？
このような事ができるサンプルやオープンソースはないでしょうか？

回答No.3

feininger · ベストアンサー

AJAXを使ったアップローダーのプログレスバーですが、
例えば、下記の繰り返しで可能です。

1) サーバー側で"32％完了"などと記述したファイルを定期的に出力する。
2) クライアント側で定期的にファイルを読み込み(AJAX)、表示する。

■AJAXを使ったファイルアップローダ「Uber Uploader」
http://gigazine.net/index.php?/news/comments/20060513_ajax_uber_uploader/

お礼

な、なるほど。仕組みの解説ありがとうございます。
大変勉強になりました。
教えていただいたソフト、すごそうです。

回答No.2

steel_gray

複数ファイルをアップロードするにはAjaxもJavascriptも関係ありません。
<input type="file">を複数用意するだけです。
提示のページではJavascriptで多少インターフェースをカッコよくしているだけです。
（もちろん、「サーバ側のプログラムが対応」している必要があります。）

進捗状況についてはJavascript(Ajax)では出来ないはず。
（ファイルサイズや転送状況はjavascriptでは把握不可能）
提示のページでどうやっているかはそちらを試してないのでわかりません。

回答No.1

auty

＞＞＞複数ファイルアップロードをしたり、

・　詳しくは調べていませんが、普通のJavaScriptで書かれているようです。

・　HTMLソースコード
<script type="text/javascript">document.write('<script src="' + document.F1Upload.action+'&mode=settings' + '&xmode=' +document.F1Upload.xmode.value+ '" type="text/javascript"><\/script>');</script>
<script type="text/javascript" src="xupload.js"></script>
より、次のファイルを開く。

http://filepost.ddo.jp/fp30/xupload.js
の次の辺りに書かれているようです。

function MultiSelector( list_target, max_files, max_size, descr_mode )
{
this.list_target = document.getElementById(list_target);
this.count = 0;
this.id = 0;
if( max_files ){
this.max = max_files;
} else {
this.max = -1;
};
document.getElementById('x_max_files').innerHTML = max_files;
//document.getElementById('x_max_size').innerHTML = " ("+max_size+" Mb total)";
document.getElementById('x_max_size').innerHTML = " (合計 "+max_size+" MB)";
this.addElement = function( element )
{

お礼

Javaが時点で手に負えないと恐れておりました。
おっしゃるとおりJavascriptのようです。
innerHTML恐るべしですね。ありがとうございます。