解决使用valiform和同时上传多张图片问题
2016-05-31 09:27
686 查看
<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";
}
}
相关文章推荐
- 安卓生命周期一个不太容易注意的问题
- Android屏幕适配
- 直接插入排序的三种实现Java
- PostgresSQL使用命令
- 2038年危机!“Unix千年虫”
- 程序员的薪资是怎么得来的?
- 常见http返回的状态码response code含义
- Hive基本操作
- android jni eclipse中出现Type XXX could not be resolved解决办法
- iOS中的UITextView文字输入光标使用技巧小结
- Xmanager关键功能描述
- Java基础类库
- “could not build module UIKit”问题的解决
- 矩阵有关知识的深刻理解!
- linux 线程同步
- 如何设置Xmanager连接主机时显示警告消息
- SQLServer函数left()、charindex()、stuff()的使用
- LeetCode OJ 75. Sort Colors
- NSObject
- JAR包