plupload 사용

첫 번째 단계 라이브러리 파일 가져오기

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.full.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.browserplus.js"></script>
<!--         -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/i18n/zh_CN.js"></script>

2단계 태그

<div style="width:500px; margin:left; position:relative;">
      											  <div id="uploader_statementPic">
           											 <p>         Flash, Silverlight, Gears, BrowserPlus      HTML5 .</p>

      											  </div>
      											  <input value="    " id="Reload_statementPic" type="button">
									</div>

3단계 값 업로드 및 반환

$(function(){
	    function plupload(name){
	    	$("#"+name).val(null);
	        $("#uploader_"+name).pluploadQueue({
	            // General settings
	             url : '/service/pluploadImage.do',
	            runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
	            max_file_size : '40mb',
	            unique_names: true,
	            chunk_size: '20mb',
	           // responseType: 'json',
	            // Specify what files to browse for
	            filters : [
	                {title: "Image files", extensions: "*"},
	                {title: "Zip files", extensions: "zip"}
	            ],
	            resize: {width: 640, height: 480, quality: 90},
	            // Flash settings
	            flash_swf_url: '/js/plupload/plupload.flash.swf',
	            // Silverlight settings
	            silverlight_xap_url: '/js/plupload/plupload.silverlight.xap',
	           // multipart_params: {"file":file.id} ,
	            preinit : {
	               Init: function(up, info) { },
	               UploadFile: function(up, file) { },
	               FileUploaded: function(up, file, info) {
	                }
	             },
	             init : {
	            	 FileUploaded :function(up, file, res){//                              
	            	 	retObject = eval("(" + res.response + ")");
						var atta = retObject.message;
						if($("#"+name).val()== null || $("#"+name).val()==''){
								$("#"+name+"").val(atta);
							}else{
								$("#"+name).val($("#"+name).val()+","+atta);
						}
	            	}
	           }
	        });
	    }
	    plupload('idCardPic');
	    plupload('statementPic');
	    plupload('bankCardPic');
	    $('#Reload_idCardPic').click(function(){
		    $("#idCardPic").val(null);
	        plupload("idCardPic");
	    });
	    $('#Reload_statementPic').click(function(){
	    	$("#statementPic").val(null);
	        plupload("statementPic");
	    });
	    $('#Reload_bankCardPic').click(function(){
	    	$("#bankCardPic").val(null);
	        plupload("bankCardPic");
	    });
	  });