上传的前台实现

1. 如何在页面中显示一个按钮，用户可以点击该按钮后选择本地要上传的文件

在页面中使用input标签，type值设置为”file”即可

1. 确定上传请求的发送方式

上传成功后的响应结果在当前页面显示，使用ajax请求来完成资源的发送

1. 上传请求的请求数据及其数据格式

请求数据:

上传的文件本身

普通数据:用户名，Id，密码等，建议上传功能中不携带除上传资源以外的数  据

数据格式:

传统的请求中，请求数据是以键值对的格式来发送给后台服务器的，但是在

上传请求中，没有任何一个键可以描述上次的数据，因为数据本身是非常大的

键就相当于一个变量，我们使用一个变量存储一个10g的电影显然是不可能 的。在上传请求中，将请求数据以二进制流的方式发送给服务器。

1. 在ajax中如何发送二进制流数据给服务器

① 创建FormData的对象，将请求数据存储到该对象中发送

② 将processData属性的值设置为false，告诉浏览器发送对象请求数据

③ 将contentType属性的值设置为false，设置请求数据的类型为二进制类型。

④ 正常发送ajax即可

1. 上传成功后，后台服务器应该响应什么结果给浏览器，并且浏览器如何处理
      

后台服务器处理完成后，响应一个json对象给浏览器，示例格式如下:

{

state:true,

msg:“服务器繁忙”,

url:”上传成功的资源的请求地址”

}

1. 代码示例(注册功能，用户头像):

2. <%--声明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>
   

   　　上传的后台实现

3. 注意:

   需要在项目导入上传相关的jar包

   1. 如何在单元方法中获取上传请求的请求数据

   传统的请求中，上传的数据是键值对数据，我们可以直接使用request对象中

   的getParameter（“键名”）来获取请求数据，或者在单元方法上声明形参来

   接收DispatcherServlect传递的请求数据。而在上传请求中，请求数据是二

   进制流数据，tomcat服务器在接收到请求后，仍然将请求数据封装到request对 象中，调用DispatcherServlet处理请求，并将存储了上传请求数据的request 对象作为实参传递给DispatcherServlet,而DispatcherServlet会根据请求调用对 应的单元方法来处理请求，而这个时候因为request中存储的是二进制请求数据

   我们就无法再使用req.getParameter来获取请求数据了。我们希望 DispatcherServlet将request对象中的二进制数据进行解析，然后将解析后的结 果传递给单元方法处理。也就是说DispatcherServlet会调用一个工具类来完成

   二进制数据的解析，所以需要我们在springmvc.xml文件中配置上传解析的bean

   对象给DispatcherServlet使用。其实说白了就是需要在springmvc.xml文件中

   配置SpringMVC官方提供的上传解析bean即可，我们正常的在单元方法上，声

   明形参直接接收解析后的结果完成请求处理即可。

   1. 将上传的资源存储到服务器的硬盘中

   ①  确定资源要写入到硬盘中的存储路径

   ② 确定文件存储的文件名，每次存储的文件名都是唯一的。

   ③ 使用IO流将文件输出到服务器硬盘中存储起来

   1. 将上传的结果响应给浏览器

   ① 设置单元方法的返回值类型为void

   ② 使用response对象完成直接响应

   ③ 响应一个json字符串给浏览器

   {

   state:true,

   msg:“服务器繁忙”,

   url:”上传成功的资源的请求地址”

   }

   1. 代码示例

   上传解析bean的配置

4. <!--配置上传解析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);
   }