1. 程式人生 > >easyUI帶上傳的表單提交

easyUI帶上傳的表單提交

jsp頁面 表單

<tr>
					<td><label>播放形式:</label></td>  
					<td><input name="pattern" type="radio" class="easyui-radiobox" value="0" id="radioLB"><span>輪播</span>    
						<input name="pattern" type="radio" class="easyui-radiobox" value="1" id="radioCB"><span>插播</span></td>
				</tr>
				<tr id="inputCB1" style="display: none">
					<td><label> 橫版圖片 </label></td>
					<td><input multiple style="width:300px" id="fileputHB" name="fileputHB" class="easyui-filebox" ></td>
				</tr>
				<tr id="inputCB2" style="display: none">
					<td><label> 豎版圖片 </label></td>
					<td><input multiple style="width:300px" id="fileputSB" name="fileputSB" class="easyui-filebox" > </td>
				</tr>
				<tr id="inputCB3" style="display: none">
					<td><label> 背景音樂 </label></td>
					<td><input multiple  style="width:300px" id="fileputM" name="fileputM" class="easyui-filebox"></td>
				</tr>
				<tr id="inputLB" style="display: none">
					<td ><label for="form-field-2"> 輪播H5地址 </label></td>
					<td><input type="text"
						id="form-field-2" placeholder="輸入URL地址" class="easyui-textbox" name="html" /></td>
				</tr>
				<tr align="center">
				
					<td><button type="button" onclick="subFrom()" class="easyui-linkbutton">
						提交
					</button></td>
					     
					<td><button class="easyui-linkbutton" type="reset">
						重置
					</button></td>
				</tr>

當選擇不同播放形式 radio時,出現不同的上傳方式的js
<script>
	$(function() {
		$(":radio")
				.click(
						function() {
							if (this.click) {
								if ($(this).attr("id") == "radioLB") {
									document.getElementById('inputLB').style.paddingLeft = '280px';
									$('#inputLB').show();
									$('#inputCB1').hide();
									$('#inputCB2').hide();
									$('#inputCB3').hide();
								}
								if ($(this).attr("id") == "radioCB") {
									document.getElementById('inputCB1').style.paddingLeft = '255px';
									document.getElementById('inputCB2').style.paddingLeft = '255px';
									document.getElementById('inputCB3').style.paddingLeft = '255px';
									$('#inputCB1').show();
									$('#inputCB2').show();
									$('#inputCB3').show();
									$('#inputLB').hide();
								}
							}
						});
	});
</script>

提交的js

<!-- 提交表單 -->
<script>
	function subFrom() {
		var form = new FormData(document.getElementById("adverform1"));
		//var form = $("#adverForm1").serialize(); 
		form.append("userUuid", "123456");
		console.log(form.pattern);
		$.ajax({
			url : "${pub}/adverOrder/add",
			type : "post",
			data :form,
			processData : false,
			contentType : false,
			success : function(data) {
				if (data.info == 'success') {
					alert(data.msg);
				} else {
					alert(data.msg);
				}
			},
			error : function(e) {
				alert("出錯了、請稍後重試!!");
			}
		});
	}
</script>

controller:
@ResponseBody
	@RequestMapping("/add")
	public JSONObject add(@RequestParam("fileputHB")MultipartFile fileHB,@RequestParam("fileputSB")MultipartFile fileSB,
			@RequestParam("fileputM")MultipartFile fileM,AdvertisingOrder adverOrder){
		JSONObject jo = new JSONObject();
		if(adverOrder.getPattern()==null){
			jo.put("info","fail");jo.put("msg","必填項不能為空");
			return jo;
		}
		switch (adverOrder.getPattern().toString()) {
		case "true":
			jo = adverOrderService.add(fileHB, fileSB, fileM, adverOrder);
			break;
		case "false":
			jo = adverOrderService.add(adverOrder);
			break;
		}
		System.out.println(jo);
		return jo;
	}

service的各層驗證:
	@Override
	public JSONObject add(AdvertisingOrder adver) {
		JSONObject jo = new JSONObject();
		//資料驗證
		if("".equals(adver.getAdvertistingName())||adver.getAdvertistingName()==null){
			jo.put("info", PromptMsgUtil.FAIL);
			jo.put("msg", PromptMsgUtil.NOT_NULL_MSG);
			return jo;
		}
		if("".equals(adver.getCommunityUuid())||adver.getCommunityUuid()==null){
			jo.put("info", PromptMsgUtil.FAIL);
			jo.put("msg", PromptMsgUtil.NOT_NULL_MSG);
			return jo;
		}
		if("".equals(adver.getHtml())||adver.getHtml()==null){
			jo.put("info", PromptMsgUtil.FAIL);
			jo.put("msg", PromptMsgUtil.NOT_NULL_MSG);
			return jo;
		}
		if("".equals(adver.getStartTime())||adver.getStartTime()==null
				||"".equals(adver.getEndTime())||adver.getEndTime()==null){
			jo.put("info", PromptMsgUtil.FAIL);
			jo.put("msg", PromptMsgUtil.NOT_NULL_MSG);
			return jo;
		}
		
		try {
			Date date1 = Helper.getHelp().DateFormat(adver.getStartTime());
			Date date2 = Helper.getHelp().DateFormat(adver.getEndTime());
			if(date1.getTime()>=date2.getTime()){
				jo.put("msg", PromptMsgUtil.START_THAN_END);
				jo.put("info", PromptMsgUtil.FAIL);
				return jo;
			}
		} catch (Exception e) {
			jo.put("msg", PromptMsgUtil.DATE_FORMAT);
			jo.put("info", PromptMsgUtil.FAIL);
			return jo;
		}
		
		List<AdvertisingOrder> select = advertisingOrderDao.selectByANameAndCID(adver.getCommunityUuid(), adver.getAdvertistingName());
		if(!select.isEmpty()){
			jo.put("info", PromptMsgUtil.FAIL);
			jo.put("msg", PromptMsgUtil.ORDER_NAME_REPEAT);
			return jo;
		}
		
		String orderNumber = Helper.getHelp().getOrderNumber();
		adver.setOrderNumber(orderNumber);
		adver.setCurrentState(0);
		adver.setDeleteFlag(false);
		
		advertisingOrderDao.insert(adver);
		jo.put("info", PromptMsgUtil.SUCCESS);
		jo.put("msg",PromptMsgUtil.ADD_SUCCESS);
		
		return jo;
	}
未完....前臺提交的validate還正在寫...