解决使用valiform和同时上传多张图片问题

原创 2016年05月31日 09:27:11
<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";
			
		}
	}


Form上传多图片

/** * 获取多个文件,,注意问题: * 1.表单无需属性enctype="multipart/form-data" * 2.前台使用XMLHttpRequest...
  • m0_37543627
  • m0_37543627
  • 2017年04月13日 11:24
  • 1700

表单图片文字同时上传的解决方法

1、我使用的是ServletFileUpload来实现同个form表单中图片和文字信息的同时上传(支持多文件上传),首先我们先看下前端JSP页面的实例代码: ...
  • LoveRestart
  • LoveRestart
  • 2016年09月27日 21:58
  • 1039

web表单多图片上传+本地预览

先看效果 1 选择本地文件,预览  2 提交上传 3后台保存 4给前台返回 文件路径      1    前端代码        ...
  • mfc2003
  • mfc2003
  • 2016年04月03日 10:12
  • 1972

微信js 上传多个照片IOS,只上传了最后一个

一开始用的each循环,android可以,执行多次wx.uploadImage,但在IOS中却只执行最后一个上传方法也许因为wx.uploadImage 有执行成功失败的回调函数这里用递归解决` ...
  • sinat_15114467
  • sinat_15114467
  • 2016年07月21日 22:41
  • 1899

Post同时上传多张图片和数据实例

1.通过http协议,post同时上传多张图片和数据到服务器上。 2.IOS开发中前端采用xcode 7.1 swift语言。 3.服务器端采用asp.net下面先看看前端代码。 1.先把需要上...
  • netedao
  • netedao
  • 2016年04月18日 15:36
  • 1453

多图片上传

前几天写过一个用户头像上传的,今天写了一个多图片上传的,在项目中应该很常用。实在之前在CocoaChina 上传过的一个demo的基础上写的,大家可以先去下看下,后面会把最新的demo上传。(http...
  • sinat_27310637
  • sinat_27310637
  • 2016年02月04日 19:02
  • 618

使用FormData对象提交表单及上传图片

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的...
  • fdipzone
  • fdipzone
  • 2014年08月29日 00:25
  • 144682

android 使用OkHttp上传多张图片

简述还是先来说说为啥用OkHttp作为多图片上传的框架,原因有两点: 1、OkHttp可以作为Volley底层传输协议,速度更快 2、使用Xutils和KJFramework上传图片存在一个小问题...
  • djk_dong
  • djk_dong
  • 2015年08月22日 17:40
  • 22597

一次上传多张图片包含不同类型png, jpeg

上传图片(jpeg, png各种类型), 及视频 分类: 技术2014-08-27 23:11 954人阅读 评论(1) 收藏 举报 这段时间需要整理一些东西, 先备注在这里, 将花时间把这个...
  • z997756128
  • z997756128
  • 2015年01月16日 10:14
  • 1374

使用FormData对象提交表单及上传图片

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的...
  • zyu67
  • zyu67
  • 2015年01月04日 15:12
  • 906
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决使用valiform和同时上传多张图片问题
举报原因:
原因补充:

(最多只允许输入30个字)