文件上传 - 前端页面上传 file 文件到服务器

最新推荐文章于 2024-06-29 16:04:34 发布

不想懂得Zenith

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量5.5k

点赞数 4

分类专栏： function 文章标签： upload file MultipartFile enctype

本文链接：https://blog.csdn.net/weixin_42629433/article/details/83379538

版权

function 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们还是基于上一篇文章进行编写 : https://blog.csdn.net/weixin_42629433/article/details/83378652

一. 数据库中创建表

-- 创建部门表
CREATE TABLE dept(
id INT(20) NOT NULL AUTO_INCREMENT,	
deptName VARCHAR(50),
createDate VARCHAR(50),
deptPic VARCHAR(100),
deptStatus VARCHAR(10),
PRIMARY KEY (id)		
)
 
INSERT INTO dept VALUES (NULL, '售后部', '2016-07-01', 'IMG_0834.JPG', '1');

二. 文件配置

1. 在父工程 pom.xml 中导入上传文件的依赖:

<!-- 上传文件需要用到的依赖 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

<!-- 上传文件到其他服务器需要用到的依赖 -->
<dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-core</artifactId>
    <version>1.18.1</version>
</dependency>
<dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-client</artifactId>
    <version>1.18.1</version>
</dependency>

2. 在 spring-mvc.xml 中配置如下内容, 管理上传文件的大小:

<!-- 文件上传 -->
<!-- 配置解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--配置最大文件大小-->
    <property name="maxUploadSize" value="10485760" />
</bean>

三. 代码编写

1. 编写数据库中要操作的表的实体封装类:

package com.cast.domain;

import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

/**
 * 封装部门表的实体类
 */
public class Dept {

    private Integer id;             //部门 id
    private String deptName;        //部门名称
    @DateTimeFormat(pattern="yyyy-MM-dd")
    private Date createDate;        //部门成立时间
    private String createDateStr;
    private String deptPic;         //部门 logo
    private Integer deptStatus;     //部门状态
    private String deptStatusStr;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getDeptName() {
        return deptName;
    }

    public void setDeptName(String deptName) {
        this.deptName = deptName;
    }

    public Date getCreateDate() {
        return createDate;
    }

    public void setCreateDate(Date createDate) {
        this.createDate = createDate;
    }

    public String getCreateDateStr() {
        if (createDate != null) {
            createDateStr = DateUtils.dateToString(createDate, "yyyy-MM-dd");
        }
        return createDateStr;
    }

    public void setCreateDateStr(String createDateStr) {
        this.createDateStr = createDateStr;
    }

    public String getDeptPic() {
        return deptPic;
    }

    public void setDeptPic(String deptPic) {
        this.deptPic = deptPic == null ? null : deptPic.trim();
    }

    public Integer getDeptStatus() {
        return deptStatus;
    }

    public void setDeptStatus(Integer deptStatus) {
        this.deptStatus = deptStatus;
    }

    public String getDeptStatusStr() {
        if(deptStatus != null) {
            if (deptStatus == 0) {
                deptStatusStr = "关闭";
            } else if (deptStatus == 1) {
                deptStatusStr = "开启";
            }
        }
        return deptStatusStr;
    }

    public void setDeptStatusStr(String deptStatusStr) {
        this.deptStatusStr = deptStatusStr;
    }

}

2. 在 dao 层编写接口操作数据库

package com.cast.dao;

import com.cast.domain.Dept;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * 持久层 dao 接口
 */
public interface IDeptDao {

    //查询所有 Dept
    @Select("select * from dept")
    @Results({
            @Result(id = true, property = "id", column = "id"),
            @Result(property = "deptName", column = "deptName"),
            @Result(property = "createDateStr", column = "createDate"),
            @Result(property = "deptPic", column = "deptPic"),
            @Result(property = "deptStatus", column = "deptStatus")
    })
    public List<Dept> findAll() throws Exception;

    //添加 Dept
    @Insert("insert into dept values (null,#{deptName},#{createDateStr},#{deptPic},#{deptStatus})")
    public void addDept(Dept dept) throws Exception;

}

3. 在 service 层接口编写操作数据看的抽象方法:

package com.cast.service;

import com.cast.domain.Dept;

import java.util.List;

/**
 * 业务层 service 接口
 */
public interface IDeptService {

    //查询所有 Dept
    public List<Dept> findAll(Integer page, Integer size) throws Exception;

    //添加 Dept
    public void addDept(Dept dept) throws Exception;

}

4. 在 service 层编写接口的实现类来调用 dao 层:

package com.cast.service.impl;

import com.cast.dao.IDeptDao;
import com.cast.domain.Dept;
import com.cast.service.IDeptService;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**
 * 业务层 service 接口实现类
 */
@Service
@Transactional
public class DeptServiceImpl implements IDeptService {

    @Autowired
    private IDeptDao deptDao;

    public List<Dept> findAll(Integer page, Integer size) throws Exception {
        PageHelper.startPage(page, size);
        return deptDao.findAll();
    }

    public void addDept(Dept dept) throws Exception {
        deptDao.addDept(dept);
    }

}

5. 在 controller 层接收前端请求数据和相应结果给前端:

*** 接收带有上传文件的 form 表单中的参数时, 需要在方法括号内额外提取 HttpServletRequest request, MultipartFile pictureFile, 且 MultipartFile 类型的参数值应与前端上传项标签中name的值 pictureFile 保持一致:

前端上传项标签 : <input type="file" name="pictureFile" />

package com.cast.controller;

import com.cast.domain.Dept;
import com.cast.service.IDeptService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.List;
import java.util.UUID;

@Controller
@RequestMapping("/dept")
public class DeptController {

    @Autowired
    private IDeptService deptService;

    @RequestMapping("/findAll.do")
    public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1")Integer page,
                                @RequestParam(name = "size", required = true, defaultValue = "5")Integer size) throws Exception {
        ModelAndView mv = new ModelAndView();
        List<Dept> deptList = deptService.findAll(page, size);
        PageInfo pageInfo = new PageInfo(deptList);
        mv.addObject("pageInfo", pageInfo);
        mv.setViewName("dept-list");
        return mv;
    }

    @RequestMapping(value = "/addDept.do", method = RequestMethod.POST)
    public String addDept(HttpServletRequest request, Dept dept, MultipartFile pictureFile) throws Exception {
        //获取文件上传的路径
        String path = request.getServletContext().getRealPath("/uploads");
        //创建文件
        File file = new File(path);
        //判断是否存在
        if (!file.exists()){
            file.mkdirs();
        }
        //获得要上传的文件名
        String filename = pictureFile.getOriginalFilename();
        //生成随机数
        String uuid = UUID.randomUUID().toString().replace( "-", "" );
        //把文件名称设置成唯一值
        filename = filename + "_" + uuid;
        //开始上传文件
        pictureFile.transferTo(new File(path,filename ));
        //把文件名存在javaBean中
        dept.setDeptPic(filename);
        //将 dept 的数据存入数据库中
        deptService.addDept(dept);
        return "redirect:findAll.do";
    }

}

四. 前端核心代码

请求页面核心代码

*** form 表单中有上传项目的, 需要在 form 标签中添加 enctype="multipart/form-data" 的属性及对应的属性值

*** 上传项 <input /> 标签中的 name 的属性值不应与封装类中的属性值一致

*** 上传项 <input /> 标签中的 name 的属性值应与 controller 层获取前端请求参数时定义的 MultipartFile 类型的参数 pictureFile 保持一致

<%--添加表单--%>
<form action="${pageContext.request.contextPath}/dept/addDept.do" id="addForm" enctype="multipart/form-data" method="post">

    <!-- 正文区域 -->
    <section class="content">

        <%--部门信息--%>
        <div class="panel panel-default">
            <%--用户输入的部门信息表--%>
            <div class="row data-type">

                <div class="panel panel-default">
                    <div class="panel-heading">部门信息</div>
                    <div class="row data-type">

                        <div class="col-md-2 title">部门名称</div>
                        <div class="col-md-4 data">
						    <input type="text" class="form-control" name="deptName" id="deptName" placeholder="部门名称" value="">
					    </div>

					    <div class="col-md-2 title">成立时间</div>
					    <div class="col-md-4 data">
						    <div class="input-group date">
							    <div class="input-group-addon">
								    <i class="fa fa-calendar"></i>
							    </div>
							    <input type="text" class="form-control pull-right" id="datepicker-a3" name="createDate">
						    </div>
					    </div>

					    <div class="col-md-2 title">部门图片</div>
					    <div class="col-md-4 data">
						    <input type="file" name="pictureFile" />
					    </div>

					    <div class="col-md-2 title">部门状态</div>
					    <div class="col-md-4 data">
						    <select id="sex" class="form-control select2" style="width: 100%" name="deptStatus">
						        <option value="noSelect" selected="selected"><--请选择--></option>
						        <option value="0">关闭</option>
						        <option value="1">开启</option>
					        </select>
				        </div>

			        </div>
		        </div>

		        <%--保存 / 返回 按钮--%>
		        <div class="box-tools text-center">
			        <button type="submit" class="btn bg-maroon">保存</button>
			        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
		        </div>

	        </div>

        </div>

    </section>

</form>

代码下载: https://pan.baidu.com/s/1wkwlwThb2YXo0rjWq9AFHg

***此代码需在 jdk1.8 下运行使用***