您的位置:首页 > 其它

解决使用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";

}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: