webuploader 上传插件

jsp

	<div id="uploader">  
			  <!--用来存放item-->  
			    <div id="thelist" class="uploader-list"></div>  
			    <div class="form-group form-inline">  
			     <div id="filePicker">选择文件</div><br>
			    	 <button id="ctlBtn" class="btn btn-upload">开始上传</button>&nbsp;
			    </div>  
		</div>

JS

$j(document).ready(function(){
	var uploader = WebUploader.create({  
	    // 选完文件后，是否自动上传。
	    auto: false,  

	    // swf文件路径
	    swf: base + '/scripts/webuploader/Uploader.swf',  

	    // 文件接收服务端。
	    server: uploadImgZipUrl,  
	    
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',
	    method: 'POST',
	    //是否要分片处理大文件上传
	    chuncked: true,

	    //分片上传，每片2M，默认5M
	    chunckSize: 2*1024*1024,
	    accept: {
	    	          title: 'file',
	    	          extensions: 'zip',
	    	          mimeTypes: 'application/zip'
	    	        	  },
	    fileVal : 'itemImgFile', 配置后台接收的文件名
	    resize: false,
	    
	});
	$j("#filePicker").on('click',function(){
		nps.info(nps.i18n("SYSTEM_ITEM_MESSAGE"), nps
				.i18n("UPLOAD_FILE_IS_EMPTY"));
		return
					
	});
	
	//上传文件
	$j("#ctlBtn").on( 'click', function() {
	   if ($.trim($(".info").html()) == "") {
		   nps.info(nps.i18n("SYSTEM_ITEM_MESSAGE"), nps
					.i18n("ALERT_FILE_IS_EMPTY"));
			return
	   }
		//添加完需要与图片一起上传的参数之后,就可以手动触发uploader的上传事件了.
		uploader.upload(); 
	});

	// 当有文件被添加进队列的时候
	uploader.on( 'fileQueued', function( file ) {
	    $j(".uploader-list").append( '<div id="' + file.id + '" class="item">' +
	        '<h6 class="info">' + file.name + '</h6>' +
	        '<p class="state">等待上传...</p>' +
	    '</div>' );
	});

	// 文件上传过程中创建进度条实时显示
	uploader.on( 'uploadProgress', function( file, percentage ) {
		   var $li = $j( '#'+file.id );
		   $percent = $li.find('.progress .progress-bar');
		   // 避免重复创建
		   if ( !$percent.length ) {
			   $percent = $('<div class="progress progress-striped active">' +
					   '<div class="progress-bar" style="width: 0%;">' +
					   '</div>' +
			   '</div>').appendTo( $li ).find('.progress-bar');
		   }
		   $li.find('p.state').text('上传中');
		   $percent.css( 'width', percentage * 100 + '%' );
		});
		//后台需要的页面获取的其他参数传递到后台，
		uploader.on( 'uploadBeforeSend', function( block, data ) {  
			var type =$("#select_type option:selected").val();
		  
		    // file为分块对应的file对象。  
		    var file = block.file;  
		  
		    // 修改data可以控制发送哪些携带数据。  
		    data.type = type;  
		}); 
		uploader.on( 'uploadSuccess', function( file,result) {
			var error = result.error;
			if(error){
				$j( '#'+file.id ).find('p.state').text('上传出错:'+error);
			}else{
				$( '#'+file.id ).find('p.state').text('已上传');
			}
		});
	
		uploader.on( 'uploadError', function( file ) {
		    $j( '#'+file.id ).find('p.state').text('上传出错');
		});
	
		uploader.on( 'uploadComplete', function( file ) {
		    $j( '#'+file.id ).find('.progress').fadeOut();
		});
		
		 //取消上传
		$j(".return").click(function() {
			window.location.href = itemListUrl
		})
});

后台

    @RequestMapping(value = "uploadImgZipUrl",method = RequestMethod.POST)
    public String upload(@RequestParam("operator")String operator,
                         @RequestParam ("file") CommonsMultipartFile file,
                         HttpServletRequest request,
                         Model model,
                         HttpServletResponse response, 
                         HttpSession session){
        response.setContentType("text/html;charset=UTF-8");
        
        if (file != null && !file.isEmpty()){
            String fileName = file.getOriginalFilename();
            model.addAttribute("fileName", fileName);
            //service
			
           
            model.addAttribute("message", message);
            }
        }       
        return "json";
    }