上传的前台实现

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

在页面中使用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包
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的配置

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