jquery.uploadify插件實現圖片上傳和預覽效果

1、js代碼：

<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').uploadify({
//以下參數均是可選
'uploader'  : '<%=basePath%>images/uploadify.swf',   //指定上傳控件的主體文件，默認‘uploader.swf’
'script'    : '<%=basePath%>UploadServlet',       //指定服務器端上傳處理文件，默認‘upload.php’
'cancelImg' : '<%=basePath%>images/cancel.png',   //指定取消上傳的圖片，默認‘cancel.png’
'buttonImg':'<%=basePath%>images/upload2.jpg',
'auto'      : true,               //選定文件後是否自動上傳，默認false
'folder'    : '/userphoto'   ,     //要上傳到的服務器路徑，默認‘/’
'multi'     : false,               //是否允許同時上傳多文件，默認false
'fileDesc' : '圖片文件' , //出現在上傳對話框中的文件類型描述
'fileExt'   : '*.jpg;*.bmp;*.png;*.gif',      //控制可上傳文件的擴展名，啓用本項時需同時聲明fileDesc
'sizeLimit': 86400,          //控制上傳文件的大小，單位byte
'onComplete': function(event,queueID,fileObj,response,data) { 
$('#image').attr("src","<%=basePath%>userphoto/"+response);
$('#image').show();
$('#photo').attr("value",response);
},
'onError'          : function(event, queueID, fileObj)  
{   
alert("文件:" + fileObj.name + " 上傳失敗");   
}
});
});
</script> 

2、注意事項
(1)、如果頁面沒有顯示“BROWSE”按鈕，則說明你的'uploader'  : '<%=basePath%>images/uploadify.swf'配置不對，檢查下路徑是否正確。
(2)、如果需要修改按鈕的圖片：可以使用'buttonImg'配置進行替換
(3)、上傳完成後，'onComplete'事件沒有觸發：在後臺servlet處理完後，要向頁面輸出1，否則頁面的onComplete回 調函數不會執行。response.getWriter().write(1);
(4)、如果在後臺servlet處理上傳將圖片的名稱改變的話，就不能通過fileObj獲得它的值，而是要在後臺servlet輸出新文件 名：out.print(filename);在jsp頁面要相應使用response來獲得新值。
(5)、圖片預覽實現：
在jsp頁面中添加一個<img src=""></img>,當上傳完成後在onComplete事件中修改img的src值。
3、下載地址
www.uploadify.com/download/