uplodify jQuery 플러그 인의 struts 2 응용

uploadiy 는 좋 은 ajax 가 파일 을 업로드 하 는 jQuery 플러그 인 입 니 다.
공식 홈 페이지: http://www.uploadify.com
 
1, 개발 패키지 다운로드: jquery. uploadify - v 2.1.0, 현재 최고 버 전 2.1.0
2. 스트레스 해소 개발 패키지.장차
                  jquery-1.3.2.min.js,
                  jquery.uploadify.v2.1.0.min.js,
                  swfobject.js,
                  uploadify.swf,
                  uploadify.css,
                  cancel.png
여섯 개의 파일 을 항목 의 대응 경로 에 추가 합 니 다.
3, jsp 페이지
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>


<!--    -->
<input type='file' name='logoImg' id="logoImg" >

 
4, 상응하는 js 코드
$(document).ready(function(){
$("#logoImg").uploadify({
		'uploader'       : 'uploadify/uploadify.swf',//  uploadify.swf   。
		'script'         : 'faceSet_doUploadFile.action',//     Action。
		'cancelImg'      : 'uploadify/cancel.png',//             。
		'folder'         : '/',//            。
		'fileDataName'   : 'logoImg',
		'displayData'    : 'percentag',
		'auto'           : true,//        。
		'multi'          : false,//         。
		'onComplete'     :function(event,queueId,fileObj,response){
			//           ,  eval       JSON  。
			var jsonObject=eval('('+response+')');
			var fileName=jsonObject.fileName;//          。
			$("#faceSetImg").attr("src","../"+fileName+"?now="+new Date());
			$("#imgShow").show();
			$("#fileShow").hide();
		},
		'onError'       :function(event,queueID,fileObj,errorObj){
			alert("Ajax      !     !");
		}
	});

});

 
5, struts. xml 설정 파일
<action name="faceSet_*" class="org.cric.action.systemset.FaceSetAction" method="{1}">
	<result name="jsonback" type="json">
		<param name="includeProperties">
			fileName
		</param>
	</result>
</action>

 6, Action 클래스 의 쓰기
private File logoImg;//      File  。
private String logoImgFileName;//        
private String logoImgContentType;//        
//  Setter ,Getter  。

public String doUploadFile()throws Exception{//ajax     .
	String path=ServletActionContext.getServletContext().getRealPath("/");//     。
	String fileName=this.faceSetServiceImpl.uploadImg(path, this.getLogoImg(), IMGNAME);
	this.setFileName(fileName);
	return "jsonback";
}

 저 는 json 플러그 인 을 사용 하여 Ajax 배경 미디어 의 교환 형식 으로 사용 합 니 다!!

좋은 웹페이지 즐겨찾기