zoukankan      html  css  js  c++  java
  • 第五节 文件上传

    从来都不坦荡,情绪都写在脸上;
    不开心的时候,不爱说话,笑也勉强。!

    输入输出流必须要要会,还有这该死的上传! 

    --胖先生

    一. 关于文件上传

    关于上传上传操作,Java Web阶段讲解

    1.必须使用表单

    2.请求必须是POST

    3.enctype="multipart/form-data"

    注:enctype="multipart/form-data" 注意虽然我们SpringMVC模拟了PUT,那么如果要做上传操作,那么一定使用POST请求

       

    上传的方式,一共两种方式:

    1.commons-fileupload-jar、commons-io.jar

    2.Servlet3.0上默认提供上传操作:可以自学一下

       

    二阶段如何完成上传操作的步骤:

    1.首先判断该请求是否为上传请求

    2.获取上传的服务端的绝对路径

    3.判断上传目录是否存在,如果不存在则创建

    4.构建磁盘工程

    5.创建ServletUpload的类

    6.解析请求

    7.遍历List<FileItem>

    8.判断表单中是普通控件还是上传的文件

    如果是上传文件

    10.获取上传文件的名称

    11.获取上传文件的后缀名

    12.创建输入输出流

    13.传统方式适应流的操作

    14.关闭资源

       

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

       

    1.SpringMVC的上传操作的配置

       

    <!-- 关于上传文件的配置,id尽量就叫该名不然有错误 -->

    <bean id="multipartResolver"

    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

    <!-- 设置上传的编码格式为UTF-8 -->

    <property name="defaultEncoding" value="UTF-8"/>

    <!-- 允许上传的最大文件为10M -->

    <property name="maxUploadSize" value="10485760"/>

    <!-- 设置临时文件夹 -->

    <property name="uploadTempDir" value="temp"/>

    <!-- 设置缓存 -->

    <property name="maxInMemorySize" value="2048"/>

    </bean>

       

       

    2.模拟环境,用户的添加功能,中间包含头像的信息

    A.新建表单和上传获取属性测试

    <h2>用户添加</h2>

    <form action="add" method="post" enctype="multipart/form-data">

    <input type="text" name="account" placeholder="账号"><br/>

    <input type="text" name="password" readonly="readonly" value="123456"><br/>

    <input type="text" name="user_name" placeholder="姓名"><br/>

    <input type="file" name="myFile">

    <input type="submit" value="户添加操作">

    </form>

    @RequestMapping(value="/add",method=RequestMethod.POST)

    public ModelAndView add(User user

    ,@RequestParam(name="myFile")MultipartFile file){

    System.out.println(user);

    System.out.println(file.getContentType());//文件类型

    System.out.println(file.getName());//表单文件域 name="myFile"

    System.out.println(file.getOriginalFilename());//获取上传文件的名称

    System.out.println(file.getSize());//获取文件的大小

    return null;

    }

    说明

    1.需要保存到数据库的信息为上传文件的名称,所有在持久化类里面我们定义的是字符串
    类型来保存上传文件的名称
    2.需要引用
    commons-fileupload-1.3.1.jar / commons-io-2.4.jar

       

    3.使用输入输出流的方式,完成上传操作!-->>核心代码:

       

    if(!file.isEmpty()){//1.判断文件是否存在

    //2.获取服务端的绝对路径

    String path = this.session.getServletContext().getRealPath("/upload");

    System.out.println("服务器项目的绝对路径-->"+path);

    //3.判断该文件夹是否存在,不存在则创建

    File folder = new File(path);

    if(!folder.isDirectory()){//在文件存在的情况下,才判断是否为文件夹,如果不存在返回的都是false

    folder.mkdirs();//创建文件

    }

    //4.取得上传文件的名称

    String fileName = file.getOriginalFilename();

    //5.获取上传文件的后缀名

    String ext = FilenameUtils.getExtension(fileName);

    //6.创建新的文件名称 user.setPhoto(newFileName) 应该保存该名称,存到数据库当中

    String newFileName = UUID.randomUUID().toString()+"."+ext;//保证上传文件名称不重复

    //7.建立输入输出流

    InputStream is = null;

    OutputStream os = null;

    try {

    //8.获取输入流

    is = file.getInputStream();

    //9.创建文件的输出流

    os = new FileOutputStream(path+"/"+newFileName);

    //10.输出过程

    byte[] b = new byte[1024];//设置读取的字节缓存

    int length = -1;

    while((length=is.read(b))!=-1){//is.read(b)当读不到数据的时候,返回值为 -1

    os.write(b, 0, length);

    }

    } catch (Exception e) {

    e.printStackTrace();

    }finally {

    //11.关闭资源

    if(is!=null)is.close();

    if(os!=null){

    os.flush();

    os.close();

    }

    }

      

       

    4.SpringMVC内置方法上传 -->>核心代码:

    //1.判断该文件是否存在

    if(!file.isEmpty()){

    //2.获取服务端的绝对路径

    String path = this.session.getServletContext().getRealPath("/upload");

    //3.判断该文件夹是否存在,不存在则创建

    File folder = new File(path);

    if(!folder.isDirectory()){//在文件存在的情况下,才判断是否为文件夹,如果不存在返回的都是false

    folder.mkdirs();

    }

    //4.取得上传文件的名称

    String fileName = file.getOriginalFilename();

    //5.获取上传文件的后缀名

    String ext = FilenameUtils.getExtension(fileName);

    //7.创建新的文件名称有两种方式

    //String newFileName = UUID.randomUUID().toString()+"."+ext;

    String newFileName = (new Date()).getTime()+"_"+(new Random()).nextInt(10000)+"."+ext;

    //8.创建文件

    File newFile = new File(path+"/"+newFileName);

    //9.上传操作

    try {//file形参中的那个文件 newFile自己重新创建的文件

    file.transferTo(newFile);

    } catch (Exception e) {//以后如果涉及到这里,我们会有另种方式处理

    e.printStackTrace();

    }

    //10.保存新的文件名称

    user.setPhoto(newFileName);

    }

    System.out.println(user);//余下操作为传递USER对象,到Mapper中执行SQL语句

    return null;

       

    4.多文件上传:简单介绍一下

    <h2>多文件上传</h2>

    <form action="more1" method="post"
    enctype="multipart/form-data">

    <input type="file" name="myFile">

    <input type="file" name="myFile">

    <input type="file" name="myFile">

     

    <input type="submit" value="多文件上传">

    </form>

    使用数组接收数据
     

    @RequestMapping(value = "/more1", method = RequestMethod.POST)

    public ModelAndView add(MultipartFile[] myFile) {

    return null;

    }

       

    5.使用jquery插件完成Ajax文件上传操作

    表单:

    <%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    %>

    <!DOCTYPE HTML>

    <html>

    <head>

    <base href="<%=basePath%>">

    <meta charset="UTF-8">

    <title>胖先生:83604162</title>

    <!-- 引入JQuery -->

    <script type="text/javascript" src="resource/jquery.js"></script>

    <!-- 引入Ajax上传插件 -->

    <script type="text/javascript" src="resource/jquery.ajaxfileupload.js"></script>

    <script type="text/javascript">

    $(function(){

    $('input[name="myFile"]').ajaxfileupload({//绑定Ajax文件上传事件

    'action': 'ajaxUpload',//设置访问路径

    'onComplete': function(data) {//data为接收服务端返回的文件名称的值

    alert(data);

    }

    });

     

    })

    </script>

    </head>

    <body>

    <h2>Ajax上传</h2>

    <input type="file" name="myFile">

    </body>

    </html>

    服务端代码:
     

    @RequestMapping(value = "/ajaxUpload", method = RequestMethod.POST)

    public ModelAndView add(MultipartFile myFile) throws IOException {

       

    // 1.判断该文件是否存在

    if (!myFile.isEmpty()) {

    // 2.获取服务端的绝对路径

    String path = this.session.getServletContext().getRealPath("/upload");

    System.out.println("服务器项目的绝对路径-->" + path);

    // 3.判断该文件夹是否存在,不存在则创建

    File folder = new File(path);

    if (!folder.isDirectory()) {// 在文件存在的情况下,才判断是否为文件夹,如果不存在返回的都是false

    folder.mkdirs();

    }

    // 4.取得上传文件的名称

    String fileName = myFile.getOriginalFilename();

    // 5.获取上传文件的后缀名

    String ext = FilenameUtils.getExtension(fileName);

    // 7.创建新的文件名称

    // String newFileName = UUID.randomUUID().toString()+"."+ext;

    String newFileName = (new Date()).getTime() + "_" + (new Random()).nextInt(10000) + "." + ext;

    // 8.创建文件

    File newFile = new File(path + "/" + newFileName);

    // 9.上传操作

    try {

    myFile.transferTo(newFile);

    } catch (Exception e) {

    e.printStackTrace();

    }

    // 二阶段传递数据

    this.response.setContentType("text/html;charset=UTF-8");

    PrintWriter out = this.response.getWriter();

       

    out.write(newFileName);

       

    out.flush();

    out.close();

     

       

    }

       

    return null;

    }

       

    胖先生的微信

    感觉该文章对你有所帮助,请点击下方
    推荐↓↓↓↓↓↓↓↓↓↓
    您的支持是我最大的动力
    该资料推荐给
    四海兴唐的各位同学,希望你们工作顺利,不管何时何地,能帮助你们是胖先生的荣幸!
     

    结束了!结束了!

    支付宝,扫一扫

  • 相关阅读:
    vue项目打包后css背景图路径不对的问题
    Vue项目图片剪切上传——vue-cropper的使用
    Vue项目使用AES做加密
    VUE滚动条插件——vue-happy-scroll
    自实现jQuery版分页插件
    HTML5中的Web Notification桌面通知
    img标签实现和背景图一样的显示效果——object-fit和object-position
    自实现PC端jQuery版轮播图
    web前端几个小知识点笔记
    限制可编辑div只能输入纯文本
  • 原文地址:https://www.cnblogs.com/pangxiansheng/p/5371297.html
Copyright © 2011-2022 走看看