- 如何在页面中显示一个按钮,用户可以点击该按钮后选择本地要上传的文件
在页面中使用input标签,type值设置为”file”即可
- 确定上传请求的发送方式
上传成功后的响应结果在当前页面显示,使用ajax请求来完成资源的发送
- 上传请求的请求数据及其数据格式
请求数据:
上传的文件本身
普通数据:用户名,Id,密码等,建议上传功能中不携带除上传资源以外的数 据
数据格式:
传统的请求中,请求数据是以键值对的格式来发送给后台服务器的,但是在
上传请求中,没有任何一个键可以描述上次的数据,因为数据本身是非常大的
键就相当于一个变量,我们使用一个变量存储一个10g的电影显然是不可能 的。在上传请求中,将请求数据以二进制流的方式发送给服务器。
- 在ajax中如何发送二进制流数据给服务器
① 创建FormData的对象,将请求数据存储到该对象中发送
② 将processData属性的值设置为false,告诉浏览器发送对象请求数据
③ 将contentType属性的值设置为false,设置请求数据的类型为二进制类型。
④ 正常发送ajax即可
- 上传成功后,后台服务器应该响应什么结果给浏览器,并且浏览器如何处理
后台服务器处理完成后,响应一个json对象给浏览器,示例格式如下:
{
state:true,
msg:“服务器繁忙”,
url:”上传成功的资源的请求地址”
}
- 代码示例(注册功能,用户头像):
-
<%--声明js代码域--%> <script type="text/javascript"> /****************资源上传功能实现**********************************/ $(function () { //给上传按钮增加单击事件 $("#btnUpload").click(function () { //获取要上传的文件资源 var file=$("#file")[0].files[0]; //创建FormData对象存储要上传的资源 var formData=new FormData(); formData.append("photo",file); //发起ajax请求完成资源上传 $.ajax({ type:"post",//使用post类型的请求 data:formData,//请求数据 url:"regUpload",//请求地址 processData:false, contentType:false, success:function (data) {//回调函数 //将响应数据转换为json对象 eval("var obj="+data); //判断 if(obj.status==true){ alert("上传成功") }else{ alert(obj.msg); } } }) }) }) </script>
上传的后台实现
-
注意:
需要在项目导入上传相关的jar包
- 如何在单元方法中获取上传请求的请求数据
传统的请求中,上传的数据是键值对数据,我们可以直接使用request对象中
的getParameter(“键名”)来获取请求数据,或者在单元方法上声明形参来
接收DispatcherServlect传递的请求数据。而在上传请求中,请求数据是二
进制流数据,tomcat服务器在接收到请求后,仍然将请求数据封装到request对 象中,调用DispatcherServlet处理请求,并将存储了上传请求数据的request 对象作为实参传递给DispatcherServlet,而DispatcherServlet会根据请求调用对 应的单元方法来处理请求,而这个时候因为request中存储的是二进制请求数据
我们就无法再使用req.getParameter来获取请求数据了。我们希望 DispatcherServlet将request对象中的二进制数据进行解析,然后将解析后的结 果传递给单元方法处理。也就是说DispatcherServlet会调用一个工具类来完成
二进制数据的解析,所以需要我们在springmvc.xml文件中配置上传解析的bean
对象给DispatcherServlet使用。其实说白了就是需要在springmvc.xml文件中
配置SpringMVC官方提供的上传解析bean即可,我们正常的在单元方法上,声
明形参直接接收解析后的结果完成请求处理即可。
- 将上传的资源存储到服务器的硬盘中
① 确定资源要写入到硬盘中的存储路径
② 确定文件存储的文件名,每次存储的文件名都是唯一的。
③ 使用IO流将文件输出到服务器硬盘中存储起来
- 将上传的结果响应给浏览器
① 设置单元方法的返回值类型为void
② 使用response对象完成直接响应
③ 响应一个json字符串给浏览器
{
state:true,
msg:“服务器繁忙”,
url:”上传成功的资源的请求地址”
}
- 代码示例
上传解析bean的配置
-
<!--配置上传解析bean:给DispatcherServlet使用,调用该bean对象完成request对象中的上传数据的解析--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>
//声明单元方法:处理文件上传请求 /*** * 形参MultipartFile * 该形参是用来接收DispatcherServlet解析request对象后存储了文件二进制数据的对象。 * 形参的名字必须是上传请求中的文件的键名 * @param photo * @param response */ @RequestMapping("regUpload") public void regUpload(MultipartFile photo, HttpServletResponse response, HttpServletRequest request) throws IOException { //1.确定文件存储路径 //使用ServletContext对象动态获取项目根目录下的upload文件夹的路径,作为资源存储路径 String path=request.getServletContext().getRealPath("/upload"); System.out.println(path); //2.确定文件存储的名字 //获取文件的原始名 ab.c.jpg String oldName=photo.getOriginalFilename(); //获取文件存储的后缀名 String suffix=oldName.substring(oldName.lastIndexOf("."));//.jpg //创建文件新的名字 名+后缀 比如 a.jpg String newName= UUID.randomUUID()+""+suffix; //3.完成存储 //创建file对象存储资源路径 File f=new File(path); if(!f.exists()){ f.mkdirs();//创建存储路径 } //输出存储 photo.transferTo(new File(f,newName)); //4.响应结果 //创建UploadResult对象存储响应数据 UploadResult uploadResult=new UploadResult(true,"",newName); //将uploadResult对象转换为json对象 String jsonStr=new Gson().toJson(uploadResult); //直接响应 response.getWriter().write(jsonStr); }