<script type="text/javascript">

var formFile = document.getElementById('file').files[0];
var formData = new FormData();
formData.append('file', formFile);
formData.append('video_duration', Math.floor(aud.duration));

var url = "api 호출 url";

$.ajax({
	url: url,
	type: "POST",
	dataType: "json",
	data: formData,
	processData: false,
	contentType: false,
	success: function(data) {
			console.log(data);
		}
	}, error: function(request,status,error) {
		console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
	}
});

 </script>
INPUT type file로 파일 업로드 구현 스크립트


//script
$(document).ready(function() {
	
	$('#file').change(function(){
		
		var fileInput = document.getElementById('file');
		var file = fileInput.files[0];
	    var reader = new FileReader();
	    reader.onload = function() {
		
	        var aud = new Audio(reader.result);
	        aud.onloadedmetadata = function(){
			
				// 동영상 파일의 재생 길이(초)
				console.log(aud.duration);
							
				// input file을 가져옴
				var formFile = document.getElementById('file').files[0];
				console.log(formFile);
				var formData = new FormData();
				formData.append('file', formFile);
				formData.append('video_duration', Math.floor(aud.duration));
			
				var url = "API 호출 URL";
				
				$.ajax({
					url: url,
					type: "POST",
					dataType: "json",
					data: formData,
					processData: false,
					contentType: false,
					success: function(data) {
						console.log(data);
					}, error: function(request,status,error) {
						console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
					}
				});
	    		
	    	}
	    }
	    
	    reader.readAsDataURL(file);	
		
	});

JSP
 
		
//JSP
컨트롤러
 

//CONTROLLER
@ResponseBody
@RequestMapping(value="해당 URL", method=RequestMethod.POST)
public Response testUpload(
		// script에서 append한 객체를 map으로 받음
		@RequestParam Map map, 
		// multipart file을 part로 받음 
		@RequestPart(value="file", required=false) MultipartFile file,
		HttpSession session,
		HttpServletRequest request) throws JsonProcessingException {
	
	DataMap dataMap = new DataMap(map);
	dataMap.put("file", file);
	
	logger.debug("dataMap {} ", dataMap);
	
	DataMap result = service.insetVideoTest(dataMap);
	
	return ResponseUtil.responseResult(result);
}

'Programming > jQuery' 카테고리의 다른 글

[jquery] 패스워드 에러 표현 innerHtml  (0) 2017.03.27
JQuery.each()  (0) 2015.07.15
[jQuery] function 정의  (0) 2015.07.02

+ Recent posts