实现功能
1.选择文件后直接预览
2.点击上传按钮后使用ajax批量提交数据给服务器处理
3.同时上传文件和表单数据
一.配置文件
springMVC配置文件中添加
<!-- 上传文件 --> <bean id="multipartResolver" class="org.springframework.monsMultipartResolver"> <property name="defaultEncoding" value="utf-8"/> <!-- 最大内存大小 --> <property name="maxInMemorySize" value="10240"/> <!-- 最大文件大小，-1为不限制大小 --> <property name="maxUploadSize" value="-1"/> </bean>
pom文件中添加依赖
<!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency>
server.xml文件添加
docBase为你需要指定的目录
path是在jsp页面中可以用来代替的目录
方便我们在jsp页面中使用绝对路径访问图片（如果是用户选择图片后直接上传后回显给src赋值可以用下这个，之前我是这么写的顺带提一嘴）
<Context docBase="/Users/chenhan/upload" path="/upload"/>
二.HTML
我这里使用的是bootstrap搭建的页面，使用方法大家可以自行百度
自己写的一个小demo，表单名字什么的大家不要在意，懂这个意思就行
<style type="text/css">.head-img{width: 30%;hieght: 30%;}.msg_form{margin:2em;}.victem_form{margin:2em;}#submit_btn{margin:1em;}</style></head><body><form class="msg_form"><label>被举报者相关信息</label><div class="form-group"><label>qq昵称:</label><input type="text" class="form-control" id="qqnc_form" name="name4qq" placeholder="qq/微信昵称请至少填写一样"></div><div class="form-group"><label>微信昵称:</label><input type="text" class="form-control" id="wxnc_form" name="name4wx" placeholder="qq/微信昵称请至少填写一样"></div><div class="form-group"><label>手机号:</label><input type="text" class="form-control" id="phone_form" name="phone4cherter" placeholder="数据库仅会保存首尾部"></div><div class="form-group"><label>微信号:</label><input type="text" class="form-control" id="wxnumber_form" name="contactWay4wx" placeholder="qq/微信号/其他方式请至少填写一样"></div><div class="form-group"><label>qq号:</label><input type="text" class="form-control" id="qqnumber_form" name="contactWay4qq" placeholder="qq/微信号/其他方式请至少填写一样"></div><div class="form-group"><label>其他联系方式:</label><input type="text" class="form-control" id="othernumber_form" name="contactWay4other" placeholder="qq/微信号/其他方式请至少填写一样"></div><div class="form-group"><label>受骗时间:</label><input type="date" class="form-control" id="date_form" name="dateCheater" placeholder=""></div><div class="form-group"><label>事件描述:</label><textarea class="form-control" rows="5" required="required" maxlength="200">请在此描述事情经过，字数限制为50-200字内</textarea></div></form><div class="form-group"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">证据截图上传(单张5M以下)</h3></div><div class="panel-body"><label>选择图片：</label><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="" id="head-img1"><div class="caption"><p><input type="file" class="btn brandPic" id4img="1"></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="" id="head-img2"><div class="caption"><p><input type="file" class="btn brandPic" id4img="2"></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="" id="head-img3"><div class="caption"><p><input type="file" class="btn brandPic" id4img="3"></p></div></div></div></div> </div></div></div><form class="msg_form"><label>提交者相关信息</label><div class="form-group"><label>称呼：*</label><input type="text" class="form-control" id="victem_name_form" name="victemName" placeholder=""></div><div class="form-group"><label>微信号:</label><input type="text" class="form-control" id="victem_wxnumber_form" name="victemWx" placeholder="qq/微信号/其他方式请至少填写一样"></div><div class="form-group"><label>qq号:</label><input type="text" class="form-control" id="victem_qqnumber_form" name="victemQq" placeholder="qq/微信号/其他方式请至少填写一样"></div></form><input type="button" value="提交" id="submit_btn" class="btn btn-success btn-lg">
三.JS
js函数介绍
<script type="text/javascript">var formData = new FormData();//-----------图片框被改变（选择文件）触发函数-----------\\$('.brandPic').on('change',function(){//upload_true==>标记需要被上传的input框，移除是为了避免二次上传$(this).removeClass("upload_true");// 如果没有选择图片 直接退出if(this.files.length <=0){return false;}//校验图片后缀及大小是否合法if(!validate_img(this)){return false;}//首先找到当前input框的id4img值，再通过拼接找到对应的img标签以便完成预览效果var imgId=$(this).attr("id4img");imgId="#head-img"+imgId;$(this).addClass("upload_true");// 图片上传到服务器var pic1 = this.files[0];//获得一个http格式的url路径:mozilla(firefox)||webkit or chrome var windowURL = window.URL || window.webkitURL;//createObjectURL创建一个指向该参数对象(图片)的URL var dataURL = windowURL.createObjectURL(pic1);$(imgId).attr("src", dataURL);console.log("change.."+formData)})//-----------调用ajax上传数据-----------\\function uploadData(formData){$.ajax({url:'${APP_PATH}/xc',type:'post',data:formData,cache: false, //上传文件不需要缓存processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头success:function(data){console.log(data);if(data.msg=="OK"){alert("上传成功")}else{alert("上传失败")}}})}/* 检验文件是否合法 */function validate_img(ele){// 返回 KB，保留小数点后两位//alert((ele.files[0].size/(1024*1024)).toFixed(2));var file = ele.value;if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");return false;}else{//alert((ele.files[0].size).toFixed(2));//返回Byte(B),保留小数点后两位if(((ele.files[0].size).toFixed(2))>=(5*1024*1024)){alert("请上传小于5M的图片");return false;}}return true;}//-----------点击提交按钮-----------\\$("#submit_btn").click(function(){if(confirm("请确保您提供消息的真实性，如遇申诉，我们将联系您进行核实。确认提交吗？")){//将表单内所有数据序列化后遍历提交到formData中var t = $('.msg_form').serializeArray();$.each(t, function() {formData.append(this.name,this.value);});//找到所有需要被提交的input框var imgsArr=$(".upload_true");//向formData中添加数据时先清空，避免重复提交用户上次点击提交时存入的数据formData.delete("images");$.each(imgsArr,function(i,img){console.log("img:"+img);// 图片上传到服务器var pic1 = this.files[0];// 服务端要求参数名称是 images formData.append('images',pic1);});//console.log(formData.get("images"));//console.log(formData.get("victemName"));//调用函数，传入formData进行ajax请求uploadData(formData)//提交完请求后将类移除避免二次提交$(".brandPic").removeClass("upload_true");}else{return false;}})</script>
四.后端代码
1.controller层
其余表单参数可以直接request.getParam()取出来，暂时没想到可以直接封装pojo对象的方法
用好方法的朋友可以评论下～
/*** wx:chenhan-wu* @param images* @param name4qq* @return*/@RequestMapping(path = "xc",method = RequestMethod.POST)public String testController(@RequestParam MultipartFile[] images,@RequestParam String name4qq) {System.out.println(name4qq);for (MultipartFile multipartFile : images) {System.out.println("image:"+multipartFile);}return null;}
五.图片地址存入服务器 可以看我的另一篇博客
如果有不明白其中思路的朋友可以联系我的wx：chenhan-wu，备注博客
我会尽力帮你解答，我也是个小白，如果有什么写的不对的地方希望大家可以帮忙指正
图片地址存入服务器
SSM环境+jquery+ajax 实现批量文件上传并预览后 同时上传文件和数据 校验图片后缀是否合法 文件大小是否超限
