在寫代碼之前，先将uploadify和grebox的插件拷貝到項目裡面
不用說，讓我們先看看代碼和效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uploadify</title>
<link href="css/default.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="css/uploadify.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="greybox/gb_styles.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" target="_blank" rel="external nofollow" >
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
showPictures();
$("#uploadify").uploadify({
'uploader' : 'uploadify.swf', //指定上傳控件的主體檔案
'script' : 'servlet/Upload?action=insertImage',//指定伺服器端上傳處理檔案
'cancelImg' : 'images/cancel.png',//指定取消上傳的圖檔
//'folder' : 'uploads', //您想将檔案儲存到的路徑
'queueID' : 'fileQueue', //隊列
'auto' : false, //標明檔案後是否自動上傳
'multi' : true, //是否允許同時上傳多個檔案
'simUploadLimit' : 2, //多檔案上傳時，同時上傳檔案數目限制
'buttonText' : 'BROWSE' //按鈕顯示文字,不支援中文，要用中文直接用背景圖檔cancelImg設定
});
});
//添加一行
function addRow()
{
//添加一行
var newTr = testTbl.insertRow();
return newTr;
}
//添加一列
function addImage(newTr,image){
var newTd1 = newTr.insertCell();
newTd1.innerHTML = "<a href= " +image + " title='操哥要改的地方' rel='gb_imageset[photos]'> <img src=" +image + " width='100' height='120'> </a>";
}
//加載資料庫中圖檔的路徑
function getLoadImage(){
var result;
$.ajax({
async:false,
type: "POST",
url: "servlet/Upload",
data:{action:'getAllImage'},
dataType: "json",
success: function(data){
result=data;//從背景取到資料
}
});
return result;
}
function showPictures(){
var result=getLoadImage();
var jsObject = eval(result); //轉換為json對象
var total = jsObject.length; //擷取所有圖檔的總記錄數
var totalRows = total/10; //擷取一共多少行
var newtree = new Array(); //行定義為數組
for(var i=0;i<totalRows;i++){ //建立行，并為行指派
newtree[i] = addRow();
}
for(var i=0;i<totalRows;i++){
for(var j=0;j<10;j++){
var jj = i*10 + j;
addImage(newtree[i],jsObject[jj]);
}
}
}
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:jQuery('#uploadify').uploadifyUpload()" target="_blank" rel="external nofollow" >開始上傳</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()" target="_blank" rel="external nofollow" >取消所有上傳</a>
</p>
<table id="testTbl"></table>
</body>
</html>
一開始，在擷取json資料源的時候，我直接在那個success裡面執行了shoupicture函數，但是始終不會出現我要的第二張圖檔的效果,最後把json資料傳回出來，但是在傳回json資料的時候，又遇到了一些小問題，要注意傳回資料的地方。