jquery 파일 일괄 업로드 컨트롤 Uploadify 3.2(자바 springMVC)

사람 이 비교적 게으르다  실 용 위주 로 조판 이 잘 안 돼 요.
Uploadify 홈 페이지 링크 먼저 올 리 기:http://www.uploadify.com/  -->PHP 의 예제,속성 설명,컨트롤 다운로드 주 소 를 볼 수 있 습 니 다.플래시 버 전(무료)과 html 5 버 전(유 료)으로 나 뉜 다.
홈 페이지 에 서 는 효과 시연 을 볼 수 있다.
또한 인터넷 에서 Uploadify 3.2 의 중국어 API 문 서 를 찾 았 습 니 다.제 가 올 린 자원 에서 다운로드 할 수 있 습 니 다.
다음은 springMVC 기반 파일 업로드 예제 입 니 다.문서 보다 직관 적 으로 보일 수 있 습 니 다.
1.항목 에 플러그 인 다운로드
2.jsp 페이지 에 다음 JS 와 CSS 도입

<script type="text/javascript" src="${ctxStatic}/uploadify/jquery.uploadify.min.js"></script>
<link type="text/css" rel="stylesheet" href="${ctxStatic}/uploadify/uploadify.css">

3.jsp 페이지 에 전시 DIV 와 조작 단 추 를 만 듭 니 다.

</pre><pre name="code" class="html"><form>
	<div id="queue"></div><!-       -->
	<input id="file_upload" name="file_upload" type="file" multiple="true"><!-      -->
</form>

4.js 코드 편집

	$(document).ready(function() {
		$("#file_upload").uploadify({
			'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//  flash    
                        //       （   action    ），     jsessionid，        session（       session，     session        302  ）
                        'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',
			'queueID' : 'queue',//   HTML div.id    
			'width' : '100',//    
			'height' : '32',//    
			'fileTypeDesc' : '      ',
			'fileTypeExts' : '*.jpg;*.png', //           ，          fileDesc 
			'fileObjName' : 'myTestFile',//      ,             ,     java  
			'buttonText' : '    ',//        ，                
			'fileSizeLimit' : '100KB',
			'multi' : true,
			'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//      
			'onFallback' : function() {//  FLASH    
				alert("    FLASH  ，      ！   FLASH     。");
			},
                        //       overrideEvents     ，                   ，
                        //              js ，         
                        'onSelect' : uploadify_onSelect,
			'onSelectError' : uploadify_onSelectError,
			'onUploadError' : uploadify_onUploadError,
			'onUploadSuccess' : uploadify_onUploadSuccess
		});
	});

5.controller 클래스 의 방법

<pre name="code" class="html">	@ResponseBody
	@RequestMapping(value = "testFu")

        //   <span style="font-family: Arial, Helvetica, sans-serif;">creativeFile   jsp    </span><span style="font-family: Arial, Helvetica, sans-serif;">creativeFile  </span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>	public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {
		System.out.println(creativeFile.getName());
		System.out.println(creativeFile.getOriginalFilename());
		System.out.println(creativeFile.getSize());
		return "    ";//           
	}

 
 
 6.附录摘自网上的重载方法列表，我做了一些改动使之更实用（感谢网络无名高手） 
  
  
 
var uploadify_onSelectError = function(file, errorCode, errorMsg) {
	var msgText = "    
";
	switch (errorCode) {
	case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
		// this.queueData.errorMsg = "       " +
		// this.settings.queueSizeLimit + "   ";
		msgText += "                " + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "   ！";
		break;
	case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
		msgText += "   [" + file.name + "]          " + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "  ！";
		break;
	case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
		msgText += "     0";
		break;
	case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
		msgText += "       ，   " + this.settings.fileTypeExts;
		break;
	default:
		msgText += "    ：" + errorCode + "
" + errorMsg;
	}
	alert(msgText);
};

var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {
	//          
	if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
		return;
	}
	var msgText = "    
";
	switch (errorCode) {
	case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
		msgText += "HTTP   
" + errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
		msgText += "      ，     ";
		break;
	case SWFUpload.UPLOAD_ERROR.IO_ERROR:
		msgText += "IO  ";
		break;
	case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
		msgText += "     
" + errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
		msgText += "       " + this.settings.uploadLimit + " ";
		break;
	case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
		msgText += errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
		msgText += "       ，     ";
		break;
	case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
		msgText += "    ";
		break;
	default:
		msgText += "  :" + file.name + "
   :" + errorCode + "
" + errorMsg + "
" + errorString;
	}
	alert(msgText);
}

var uploadify_onSelect = function() {

};

var uploadify_onUploadSuccess = function(file, data, response) {
	alert("                 , onQueueComplete     ");
};

var uploadify_onQueueComplete = function(){
	alert("    -->       ");
}
  
여기 서 Uploadify 파일 을 대량으로 업로드 하면 됩 니 다.질문 이 있 으 면 메 시 지 를 남 겨 서 우리 함께 토론 합 시다.이 컨트롤 은 간단 합 니 다.시간 을 들 여 보면 다 알 수 있 습 니 다.이 글 을 쓰 는 목적 도 모두 가 더욱 빨리 착수 할 수 있 도록 귀중 한 시간 을 절약 하기 위해 서 이다.