<%
@ page language
=
"
java
"
contentType
=
"
text/html; charset=UTF-8
"
pageEncoding = " UTF-8 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > Insert title here </ title >
< script type ="text/javascript" src ="js/jquery.js" ></ script >
< script type ="text/javascript" src ="js/ajaxfileupload.js" ></ script >
< script type ="text/javascript" >
function ajaxFileUpload()
{
$( " #loading " )
.ajaxStart( function (){
$( this ).show();
}) // 開始上傳文件時顯示一個圖片
.ajaxComplete( function (){
$( this ).hide();
}); // 文件上傳完成將圖片隱藏起來
$.ajaxFileUpload
(
{
url:'fileUploadAction.action', // 用於文件上傳的服務器端請求地址
secureuri: false , // 一般設置為false
fileElementId:'file', // 文件上傳空間的id屬性 <input type="file" id="file" name="file" />
dataType: 'json', // 返回值類型 一般設置為json
success: function (data, status) // 服務器成功響應處理函數
{
alert(data.message); // 從服務器返回的json中取出message中的數據,其中message為在struts2中action中定義的成員變量
if ( typeof (data.error) != 'undefined')
{
if (data.error != '')
{
alert(data.error);
} else
{
alert(data.message);
}
}
},
error: function (data, status, e) // 服務器響應失敗處理函數
{
alert(e);
}
}
)
return false ;
}
</ script >
</ head >
< body >
< img src ="loading.gif" id ="loading" style ="display: none;" >
< input type ="file" id ="file" name ="file" />
< br />
< input type ="button" value ="上傳" onclick ="return ajaxFileUpload();" >
</ body >
</ html >
pageEncoding = " UTF-8 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > Insert title here </ title >
< script type ="text/javascript" src ="js/jquery.js" ></ script >
< script type ="text/javascript" src ="js/ajaxfileupload.js" ></ script >
< script type ="text/javascript" >
function ajaxFileUpload()
{
$( " #loading " )
.ajaxStart( function (){
$( this ).show();
}) // 開始上傳文件時顯示一個圖片
.ajaxComplete( function (){
$( this ).hide();
}); // 文件上傳完成將圖片隱藏起來
$.ajaxFileUpload
(
{
url:'fileUploadAction.action', // 用於文件上傳的服務器端請求地址
secureuri: false , // 一般設置為false
fileElementId:'file', // 文件上傳空間的id屬性 <input type="file" id="file" name="file" />
dataType: 'json', // 返回值類型 一般設置為json
success: function (data, status) // 服務器成功響應處理函數
{
alert(data.message); // 從服務器返回的json中取出message中的數據,其中message為在struts2中action中定義的成員變量
if ( typeof (data.error) != 'undefined')
{
if (data.error != '')
{
alert(data.error);
} else
{
alert(data.message);
}
}
},
error: function (data, status, e) // 服務器響應失敗處理函數
{
alert(e);
}
}
)
return false ;
}
</ script >
</ head >
< body >
< img src ="loading.gif" id ="loading" style ="display: none;" >
< input type ="file" id ="file" name ="file" />
< br />
< input type ="button" value ="上傳" onclick ="return ajaxFileUpload();" >
</ body >
</ html >
注意觀察<body>中的代碼，並沒有form表單。只是在按鈕點擊的時候觸發ajaxFileUpload()方法。需要注意的是js文件引入的先后順序，ajaxfileupload.js依賴於jquery因此你知道的。
點我下載工程代碼