idea使用SSM框架上传图片功能

一、实现效果图

 二、jsp前端界面

<form action="/addShop.do" method="post" enctype="multipart/form-data">
    <div style="border-radius: 5px;background-color: white;margin: 20px;padding: 20px">
        <div class="inputcss">
            <div> 商品名称：</div>
            <div><input type="text" placeholder="请输入信息" name="shopname"></div>
        </div>
        <div class="inputcss">
            <div>商品金额：</div>
            <div><input type="text" placeholder="请输入信息" name="shopmoney"></div>
        </div>

        <div class="inputcss">
            <div>商品类型：</div>
            <div>
                <select style="width: 300px;height: 35px" name="shoptypename">
                    <c:forEach items="${allData}" var="model" varStatus="sta">
                        <option value="${model.typeid},${model.typename}" >${model.typename}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="inputcss">
            <div>商品描述：</div>
            <div><textarea style="  height:185px ; width: 300px;" name="shopmessage"></textarea></div>
        </div>

        <div class="inputcss">
            <div>商品图片：</div>
            <div><input type="file" placeholder="请输入信息" name="shopimageShow"></div>
        </div>

        <div class="inputcss"> 
            <div style="visibility: hidden">按钮信息：</div>
            <div><input type="submit" value="确认添加" style="height: 40px;background-color: #615FE6;color: white;width: 300px;margin-top: 10px;border: 1px solid #615FE6;border-radius: 5px"/></div>
        </div>
    </div>
</form>

说明：

1：action="/addShop.do"；是数据的提交接口名称

2：enctype="multipart/form-data"；图片上传需要添加此属性

 三、java逻辑代码

1：数据接口实体类

public class ShopModel {
    private Integer shopid;

    private String shopname;

    private String shopmoney;

    private String shoptypeid;

    private String shoptypename;

    private String shopmessage;

    private String shopimage;

    private MultipartFile shopimageShow;

    public MultipartFile getShopimageShow() {
        return shopimageShow;
    }

    public void setShopimageShow(MultipartFile shopimageShow) {
        this.shopimageShow = shopimageShow;
    }

    public Integer getShopid() {
        return shopid;
    }

    public void setShopid(Integer shopid) {
        this.shopid = shopid;
    }

    public String getShopname() {
        return shopname;
    }

    public void setShopname(String shopname) {
        this.shopname = shopname;
    }

    public String getShopmoney() {
        return shopmoney;
    }

    public void setShopmoney(String shopmoney) {
        this.shopmoney = shopmoney;
    }

    public String getShoptypeid() {
        return shoptypeid;
    }

    public void setShoptypeid(String shoptypeid) {
        this.shoptypeid = shoptypeid;
    }

    public String getShoptypename() {
        return shoptypename;
    }

    public void setShoptypename(String shoptypename) {
        this.shoptypename = shoptypename;
    }

    public String getShopmessage() {
        return shopmessage;
    }

    public void setShopmessage(String shopmessage) {
        this.shopmessage = shopmessage;
    }

    public String getShopimage() {
        return shopimage;
    }

    public void setShopimage(String shopimage) {
        this.shopimage = shopimage;
    }
}

说明：需要注意的是MultipartFile shopimageShow这个字段，这个是通过Mybatis文件生成代码没有的；需要自己添加一下这个字段；目的是为了接受和处理jsp页面传递过来的文件信息

2：数据接口实体类

@RequestMapping("/addShop.do")
private String add(ShopModel model, HttpServletRequest request) {
    
    model.setShoptypeid(model.getShoptypename().split(",")[0]);
    model.setShoptypename(model.getShoptypename().split(",")[1]);

    String newFileName = "";
    String fileName = model.getShopimageShow().getOriginalFilename();
    //选择了文件
    if(fileName.length() > 0){
        String realpath = request.getServletContext().getRealPath("/upload");
        //实现文件上传
        String fileType = fileName.substring(fileName.lastIndexOf('.'));
        //防止文件名重名
        newFileName = MyUtil.getStringID() + fileType;
        model.setShopimage("upload/"+newFileName);
        File targetFile = new File(realpath, newFileName);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        //上传
        try {
            model.getShopimageShow().transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    service.add(model);
    return "forward:/findAllShop.do";//默认先找了页面
}

3：列表数据显示

<table border="1px" align="center" style="color: #666;margin-top: 20px;padding-left: 30px;width: 95%;">

    <tr style="background-color: #538ec6;color: white;">
        <th>编号</th>
        <th>商品名称</th>
        <th>商品费用</th>
        <th>商品类型</th>
        <th>图片信息</th>
        <th>操作</th>
    </tr>

    <c:forEach items="${allData}" var="model" varStatus="sta">
        <tr style="align-items: center;height: 50px" align="center">
            <td>${sta.index+1}</td>
            <td>${model.shopname}</td>
            <td>${model.shopmoney}</td>
            <td>${model.shoptypename}</td>
            <td> <img src="${model.shopimage}" style="width: 200px;height: 100px;margin: 5px"> </td>
            <td><a href="delShop.do?id=${model.shopid}">删除</a>&nbsp&nbsp&nbsp<a href="#">修改</a></td>
        </tr>
    </c:forEach>
</table>