本文介绍了如何使用SSM框架结合jQuery和Ajax实现批量文件上传，并在上传前预览文件。功能包括选择文件后直接预览、点击上传按钮后通过Ajax批量提交数据到服务器，同时上传文件和表单数据。文中详细讲解了配置文件、HTML、JS代码以及后端Controller层的实现，并强调了文件后缀校验和大小限制的重要性。
实现功能
1.选择文件后直接预览
2.点击上传按钮后使用ajax批量提交数据给服务器处理
3.同时上传文件和表单数据
一.配置文件
springMVC配置文件中添加
<!-- 上传文件 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<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，备注博客
我会尽力帮你解答，我也是个小白，如果有什么写的不对的地方希望大家可以帮忙指正
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
