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


版权声明:java架构师视频教程,高并发集群分布式视频教程,高并发处理方式,大数据视频教程出售QQ:694042039 举报

相关文章推荐

android 使用OkHttp上传多张图片

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

使用AFN多张图片上传

使用AFN多张图片上传 通过相机拍照等三张图片都完成之后点击提交按钮提交图片#import "ViewController.h" #import "AFNetworking.h" #import...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

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

AFNetworking上传多张图片

我们在项目里会经常遇到上传数据的情况比如更新头像、发布信息。大家可以在网络层写一个通用的上传方法。 实现这个方法最重要的是理解: [formData appendPartWithFileData: n...

上传多张图片

package com.isd.controller; import java.io.File; import java.io.IOException; import java.io.P...

php多张图片上传

define('MUILTI_FILE_UPLOAD', '10'); //最多10个文件同时上传 define('MAX_SIZE_FILE_UPLOAD', '500000' ); //文件大小...

iOS多张图片上传

+ (NSString *)postRequestWithURL: (NSString *)url // IN postParems: (NSMutabl...

asp.net 多张图片上传

先看界面  url界面设计 运行效果 图片预览效果 code: ...

retrofit2 上传多张图片

retrofit2.0 上传多张图片这次写接口后台告诉我说图片按照标准流上传就行了,然后返回是图片地址 { “data”: [ { “image2”: “/driver...

IOS 上传多张图片

IOS 图片上传 个人总结
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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