使用 jQuery FileUpload 插件实现异步上传
首先，先做两个提前准备工作
1.下载插件
2.向项目导入需要的css样式和js样式
下面，开始实现 使用 jQuery FileUpload 插件实现异步上传
<!- jsp 页面 以添加一个学生为例子 -!>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<base href="<%=basePath %>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!- 引入bootstrap样式 和 jQuery FileUpload插件的css样式 -!>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fileupload.css">
</head>
<body>
<h3>添加就业学员</h3>
<div class="container">
<form action="student/add" style="position: relative;" method="post" enctype="multipart/form-data">
<div>
<label for="sName">姓名</label>
<input style="width:300px;" type="test" name="sName" class="form-control" id="sName" placeholder="Plest witer your Name">
</div>
<div>
<label for="age">年龄</label>
<input style="width:300px;" type="test" name="age" class="form-control" id="age" placeholder="Plest witer your age">
</div>
<div>
<label for="sSet">性别</label>
<input type="radio" name="sSet" value="男" checked="checked" />男
<input type="radio" name="sSet" value="女" />女
</div>
<div>
<select name="county" style="height:38px; width:300px; margin-top: 25px;">
<option value="-1">县区</option>
<option value="磁县">磁县</option>
<option value="临漳">临漳</option>
<option value="永年县">永年县</option>
<option value="魏县">魏县</option>
<option value="大名县">大名县</option>
</select>
</div>
<div>
<label for="address">详情地址</label>
<input style="width:300px;" type="test" name="address" class="form-control" id="address" placeholder="Plest witer your address">
</div>
<div>
<select name="classes" style="height:38px; width:300px;margin-top: 25px;">
<option value="-1">班级</option>
<option value="T12">T12</option>
<option value="T13">T13</option>
</select>
</div>
<div>
<label for="graduate">毕业时间</label>
<input style="width:300px;" type="test" name="graduate" class="form-control" id="graduate" placeholder="Plest witer your address">
</div>
<div >
<label for="workTime">工作时间</label>
<input style="width:300px;" type="test" name="workTime" class="form-control" id="workTime" placeholder="Plest witer your address">
</div>
<div>
<label for="pay">福利待遇</label>
<input style="width:300px;" type="test" name="pay" class="form-control" id="pay" placeholder="Plest witer your address">
</div>
<div id="photo" style="position: absolute;right:600px;top:10px;width:150px;text-align: center;">
<div class="imges" style="position: relative; ">
<img src="img/NV02.jpg" class="img-responsive">
<div id="progress" class="progress" style="position: absolute;left:0px;top:0px;height:100%;width:100%;opacity:.5;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<!- 引用插件的样式 修饰上传头像的样式 -!>
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>上传头像...</span>
<input id="fileupload" type="file" name="image" >
</span>
</div>
<!- 用于表单提交 name属性 的隐藏域 -!>
<input type="hidden" name="img" id="img_hidden">
</form>
</div>
<!-引入 jQuery FileUpload插件的js样式 注意，jquery.fileupload.js 依赖于jquery.iframe-transport.js和jquery.ui.widget.js 所以三个js逗得引入-!>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jquery.fileupload.js"></script>
<script type="text/javascript">
$(function(){
<!- 上传调用 fileupload 方法 url：文件的上传路径名称 dataType：上传格式 done：可以理解为上传时需要做什么 progressall：上传时进度条的变化 -!>
<!- 我这里文件指 ‘学生头像’ -!>
$("#fileupload").fileupload({
<!- “student/upload” 指的是 控制器方法( 方法在下面可见 ) 返回文件路径 -!>
url:"student/upload",
dataType:"json",
done : function(e,data){
<!- 经测试，data反回的result属性里面的url 就是文件路径名称，所以用变量获取一下 -!>
var url = data.result.url;
<!-设置上传之后 将上传文件替换默认文件 -!>
$("#photo img").attr("src","img/"+url);
<!-将文件路径赋给隐藏域，用于表单提交-!>
$("#img_hidden").val(url);
<!- 上传之后进度条长度为0% -!>
$('#progress .progress-bar').css("width","0%").html("");
},
progressall: function (e, data) {
<!- 固定算法算出进度条 变化的百分比 后面参数10， 表10进制 -!>
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
<!- 为进度条宽度赋值 将值赋给百分比 -!>
'width',
progress + '%'
).html(progress + '%');
}
});
})
</script>
</body>
</html>
<!- 控制器方法 student/uploa -!>
<!- 注解成一个控制器 -!>
@Controller
@RequestMapping("/student")
public class StudentController {
<!-- 用注解方式，value指定从页面的提交地址，method指定是用表单的方式提交过来的 -->
@RequestMapping(value="/upload",method=RequestMethod.POST)
<!- 注解 @ResponseBody作用是带传递数据，不跳页面 因为返回键值，所以放回值 用Map-!>
@ResponseBody
<!--里面的参数 MultipartFile photo指文件上传的参数，与页面file类型的input的name值必须一致，HttpServletRequest request获取请求参数，File不提供request提交 -->
public Map<String, Object> upload(MultipartFile image,HttpServletRequest request) throws Exception{
Map<String, Object> map = new HashMap<>();
<!- 判断，如果上传的文件内容不为空 执行以下操作 -!>
if (!image.isEmpty()) {
<!- 保存文件到指定的路径 这里获取的是服务器的绝对路径 -!>
String path = request.getServletContext().getRealPath("/img");
<!-把文件放到项目的指定地方 -!>
File dest = new File(path + File.separator + image.getOriginalFilename());
image.transferTo(dest);
<!- 将植传递会页面 键为url 值为文件名称 -!>
map.put("url", image.getOriginalFilename());
}
return map;
}
}
<!- 另外在扩展一个知识点 提交表单的之后 Ajax支持序列化提交表单 -!>
//拿我这个例子来说明 我要添加一个学生 subFrom 可以是你添加学生的提交按钮调用的一个函数
function subFrom(){
<!- #form 指提交表单form定义的id 。serialize指的是调用序列化方法-!>
var result = $("#form").serialize();
<!- 发送异步请求 传递参数就是序列化方法定义的变量 result -!>
$.post("student/add",result,function(){
})
}
以上是我的一点总结，希望可以帮助到大家 ！
