springMVC实现文件图片的上传下载功能详解（源码已提供，小白必看）(一)

一写代码就开心

发布于 2020-11-19 15:37:45

2K0

发布于 2020-11-19 15:37:45

文章被收录于专栏：java和python

我们在做项目的时候，有时候遇见要实现Word文件，图片实现上传和下载，springmvc给我们提供了很好的方法，以下将从前端到后端进行详解，附带源码和实现效果

[1] 上传的前台实现

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

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

确定上传请求的发送方式

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

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

请求数据:

上传的文件本身

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

数据格式:

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

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

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

4. 在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>

1 搭建ssm项目

以上就是ssm架构的搭建。

前端的实现（代码）

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath %>"/>
    <title>Title</title>
    <%--引入jquery文件--%>
    <script type="text/javascript" src="js/j.js"></script>
    <%--声明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("上传成功");
                            $('#img').val(obj.url);
                            $('#myImg').attr("src","upload/"+obj.url).css("display","");
                        }else{
                            alert(obj.msg);
                        }
                    }
                })

            })
        })
    </script>

</head>
<body>
    <%--创建注册页面--%>
    <h3 align="center">欢迎注册系统</h3>
    <hr>
    <%--创建注册表单--%>
    <div style="width:600px;margin: auto;">
        <form action="userReg" method="post">
            <table cellpadding="10px" style="margin: auto;margin-top:20px;">
                <tr>
                    <td>用户名:</td>
                    <td>
                        <input type="text" name="uname" value=""><br>
                    </td>
                </tr>

                <tr>
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pwd" value=""><br>
                    </td>
                </tr>
                <tr>
                    <td>头像:</td>
                    <td>
                        <input type="file" id="file" value="点击选择头像">&nbsp;<a id="btnUpload" href="javascript:void(0)">点击上传</a>
                        <input type="hidden" name="img" id="img" value="" >
                        <img src="" alt="" id="myImg" width="100px" style="display: none">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" >
                        <input type="submit" value="完成注册">
                    </td>
                </tr>
            </table>
        </form>
    </div>



</body>
</html>

 <input type="file" id="file" value="点击选择头像">

以上的这个前端代码，在界面上面的显示是

这样我们点击，就可以选择要上传的文件了，选择了之后，就会变为这样

相当于file类型的这个input框里面已经有这个图片的信息了。这个后面有一个上传的按钮

代码是

;<a id="btnUpload" href="javascript:void(0)">点击上传</a>

这个走ajax。所以在js里面写ajax的代码

  /****************资源上传功能实现**********************************/
        $(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("上传成功");
                            $('#img').val(obj.url);
                            $('#myImg').attr("src","upload/"+obj.url).css("display","");
                        }else{
                            alert(obj.msg);
                        }
                    }
                })

            })
        })
    </script>

解释ajax里面的代码

先获取file类型input里面的信息

//获取要上传的文件资源
                var file=$("#file")[0].files[0];

 var file1=$("#file")
                console.log(file1);输出的信息是以下的图片

输出的是一个数组，我们打开这个0，从里面找到图片的二进制的资源

0里面的files里面也是一个数组，files里面的0 里面也是一个数组，这个数组就是我们要的二进制的信息，我们就是要获取这个。所以这样获取

获取到了，将数据利用ajax发送，所以需要将数据放到formDate对象里面

  //创建FormData对象存储要上传的资源
                var formData=new FormData();
                formData.append("photo",file);

之后既然这个对象里面有二进制的信息了，就将这个对象利用ajax发送就可以了

  //发起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("上传成功");
                            $('#img').val(obj.url);
                            $('#myImg').attr("src","upload/"+obj.url).css("display","");
                        }else{
                            alert(obj.msg);
                        }
                    }
                })

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax