<script src="${pageContext.servletContext.contextPath }/script/jquery-form.js" type="text/javascript"></script>

<form class="enterForm" name="fileForm" >
		<div class="p10 pb30 rel">
			<div class="enterBox enterPdt">
				<div class="yScrollTab">
		            <ul class="enterList rel">
		            	<li>
		                    <label class="enterText">平臺：</label>
		                    <input type="hidden" name="typeId" id="typeid">
		                    <input type="text" id="platform"  class="enterInput inputTab" readonly/>
		                    <table class="tableTh tc selectTab dn">
		                    	<tr>
			                    	<td colspan="5">
				                    	<div class="autoTab">
				                    		<table class="tableTd tc selectTd">
						                    	<tr>
						                    		<td class="tdw30">1</td>
						                    		<td class="tdw200">PC首頁</td>
						                    	</tr>
						                    	<tr>
						                    		<td class="tdw30">2</td>
						                    		<td class="tdw200">M站首頁</td>
						                    	</tr>
					                    	</table>
				                    	</div>	
			                    	</td>
		                    	</tr>
		                    </table>
		                    <div class="Validform_checktip"></div>
		                </li>
		                <li>
		                    <label class="enterText">列表圖：</label>
		                    <a class="enterUpload">
		                    	<span class="enterUrl"></span>
							    <input type="file" name="bannerimage" id="file" class="enterInput">
							</a>
		                    <div class="Validform_checktip"></div>
		                </li>
		                <li>
		                    <label class="enterText enterArea">列表圖預覽：</label>
		                    <p class="enterImg"><img id="previewImage" src=""/></p>
		                    <div class="Validform_checktip"></div>
		                </li>
		                <li>
		                    <label class="enterText">連結地址：</label>
		                    <input type="text" name="imghref" id="ctName" class="enterInput"  />
		                    <div class="Validform_checktip"></div>
		                </li>
		                <li>
		                    <label class="enterText">排序號：</label>
		                    <input type="text" id="ctJob" name="sortnum" class="enterInput"/>
		                    <div class="Validform_checktip"></div>
		                    <div id="text" style="color:#f00;"></div>
		                </li>
		            </ul>
		        </div>
		    </div>
		    <article class="rightBox">
				<ul class="submitList tc">
					<li class="btnEdit">
						<a href="javascript:;"><input type="submit" id="bsubmit" value=""/><i class="iconfont"></i>
							<p class="pt5">應用此次編輯</p>
						</a>
					</li>
					<li class="btnReturn"><a href="#"><input type="reset" value=""/><i class="iconfont"></i>
						<p class="pt5">撤銷此次編輯</p></a>
					</li>
				</ul>
			</article>
		</div>
	</form>
 

<script type="text/javascript">
$(function(){
<span style="white-space:pre">	</span>/* 驗證 */
<span style="white-space:pre">	</span>    var $form = $(".enterForm").Validform({
<span style="white-space:pre">			</span>tiptype:3,
<span style="white-space:pre">			</span>showAllError:true,
<span style="white-space:pre">			</span>datatype:{},
<span style="white-space:pre">			</span>beforeSubmit(data){
<span style="white-space:pre">				</span> formsubmit();
<span style="white-space:pre">				</span> return false;
<span style="white-space:pre">				</span>}
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>$form.addRule([
<span style="white-space:pre">			</span>{
<span style="white-space:pre">				</span>ele:'#ctName',
<span style="white-space:pre">				</span>datatype:'*',
<span style="white-space:pre">				</span>nullmsg:'請輸入連結地址'
<span style="white-space:pre">			</span>},
<span style="white-space:pre">			</span>{
<span style="white-space:pre">				</span>ele:'#typeid',
<span style="white-space:pre">				</span>datatype:'*',
<span style="white-space:pre">				</span>nullmsg:'請選擇釋出平臺'
<span style="white-space:pre">			</span>}]);  
<span style="white-space:pre">	</span>/* 獲取上傳地址*/
<span style="white-space:pre">	</span>uploadImg('.enterUpload');
})
document.getElementById('file').onchange = function(evt) {  
    // 如果瀏覽器不支援FileReader，則不處理  
    if (!window.FileReader) return;  
    var files = evt.target.files;  
    for (var i = 0, f; f = files[i]; i++) {  
  
        if (!f.type.match('image.*')) {  
            continue;  
        }  
        var reader = new FileReader();  
  
        reader.onload = (function(theFile) {  
  
            return function(e) {  
                // img 元素  
                document.getElementById('previewImage').src = e.target.result;  
            };  
  
        })(f);  
        reader.readAsDataURL(f);  
    }  
} 


function formsubmit(){ //<span style="font-family: Arial, Helvetica, sans-serif;">jquery-form.js實現表單的序列化</span>
    var form = $("form[name=fileForm]");  
    var options  = {    
        url:'savebanneradd.html',    
        type:'post',    
        success:function(data)    
        {    
        <span style="white-space:pre">	</span>delCurrent('${pageContext.servletContext.contextPath }/background/banner/bannermanage.html');
        }    
    };    
    form.ajaxSubmit(options);  
    $("#fileForm").submit();  
}
</script>
 

BannerController.java實現圖片和值得接收

@ResponseBody
	@RequestMapping("savebanneradd")
	public String saveBannerAdd(HttpServletRequest request,Model model,String typeId,String imghref,String sortnum){
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());    
		//判斷 request 是否有檔案上傳,即多部分請求   
		MultipartFile image=null;
		if(multipartResolver.isMultipart(request)){    
		    //轉換成多部分request      
		    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;    
		    image  =  multipartRequest.getFile("bannerimage");
		}
		Banner banner = new Banner();
		if(typeId != null && !("".equals(typeId))){
		Integer idInteger = Integer.valueOf(typeId);
		banner.setTypeId(idInteger);
		}
		if(imghref != null && !("".equals(imghref))){
		banner.setHref(imghref);
		}
		if(sortnum != null && !("".equals(sortnum))){
			banner.setOrderNum(sortnum);
			}
		UploadImages uploadImages = new UploadImages();
		String bigImg="";
		if(image != null && !(image.isEmpty())){
			bigImg = uploadImages.upLoadImage(request, image);
		}
		User user = (User) request.getSession().getAttribute("userSession");
		banner.setUserId(user.getUserId());
		banner.setBigImg(bigImg);
		try {
			bannerService.add(banner);
			return "success";
		} catch (Exception e) {
			e.printStackTrace();
			return "fail";
			
		}
	}