zoukankan      html  css  js  c++  java
  • 上传的前台实现

    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);
        }
        

          

  • 相关阅读:
    我要好offer之 二叉树大总结
    我要好offer之 字符串相关大总结
    楼层扔鸡蛋问题[转]
    Linux System Programming 学习笔记(十一) 时间
    Linux System Programming 学习笔记(十) 信号
    Linux System Programming 学习笔记(九) 内存管理
    Linux System Programming 学习笔记(八) 文件和目录管理
    Linux System Programming 学习笔记(七) 线程
    Linux System Programming 学习笔记(六) 进程调度
    APUE 学习笔记(十一) 网络IPC:套接字
  • 原文地址:https://www.cnblogs.com/vincentmax/p/14314586.html
Copyright © 2011-2022 走看看