<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";
}
}