質問のタイトルに書いたように、少しのjavascriptを使用することをお勧めします。JQueryまたはプロトタイプのいずれかで作業できます。
私はこの最後のものについてもっと知っているので、いくつかのコードを提供します
これがあなたのケースについて私が理解しているプロセスです。
まず、サーバーがフォームを含むページを送信します。次に、ユーザーがファイルを選択して送信ボタンをクリックすると、ページはリロードされず、Ajax を使用してジョブが実行され、JQuery がデータを取得して Ajax 経由でrequest();
サーバーに送信し ( )、サーバーが結果を返信します。表示するdisplayFilesList();
your_form_id
あなたのフォームIDです
submitForm
フォームが送信されるときに呼び出される関数の名前です
displayFilesList
サーバーが結果を送り返すときに呼び出される関数になります。この関数は、json 形式で結果を送り返すことも想定しています。
$('#your_form_id').submit(submitForm);
function submitForm()
{
var data = $('#your_form_id').serializeArray();
//Code to remove the send button here
//Code to insert a loading.gif
request("/your/url", data, displayFilesList);
return false;
}
function displayFilesList(jsonResult)
{
var data = jQuery.parseJSON(jsonResult);
//Code to display the files list here
//
}
function request(url, paramPost, successCallback, errorCallback)
{
if ((typeof successCallback == 'undefined') || (successCallback == null))
successCallback = dispSuccess;
if ((typeof errorCallback == 'undefined') || (errorCallback == null))
errorCallback = dispError;
var AjaxUrl = url;
$.ajax({
type: "POST",
url: AjaxUrl,
data: paramPost
}
).done( function(msg)
{
successCallback(msg);
}
).fail( function(jqXHR, textStatus, errorThrown)
{
errorCallback(jqXHR, textStatus, errorThrown);
}
);
}
function dispError(jqXHR, textStatus, errorThrown)
{
alert(jqXHR.responseText);
}
function dispSuccess(html)
{
alert(html);
}