智能商贸系统10-产品添加修改，图片上传及缩略图

1、效果

• 颜色展示，使用div合适尺寸设置背景色或者使用input的color类型
• 添加产品类型使用 easyui-combobox，没有使用二级联动
• 图片上传，form表单设置属性enctype=“multipart/form-data”
• 图片后台保存分为原图和缩略图，修改的时候本次上传新图要把旧图片删除，不上传图片进行空判断
• 修改的时候单位、品牌、类型的回显
  

2、导包

 <!-- 缩略图 -->
        <dependency>
            <groupId>net.coobird</groupId>
            <artifactId>thumbnailator</artifactId>
            <version>0.4.6</version>
        </dependency>

3、添加

3.1、product/index.jsp

主要注意修改form表单类型，和3个组合框，js代码打开和保存方法没有什么变化

<%--添加或者修改的弹出框--%>
<div id="editDialog" class="easyui-dialog"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#btns'"
     style="width: 350px;text-align: center">
    <form id="editForm" method="post" style="padding-left: 33px;margin-bottom: 0px;" enctype="multipart/form-data">
        <input type="hidden" name="id"/>
        <table cellpadding="1">
            <tr>
                <td> 名称:</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"/></td>
            </tr>
            <tr>
                <td> 颜色:</td>
                <td><input type="color" name="color" data-options="required:true"/></td>
            </tr>
            <tr>
                <td> 成本价:</td>
                <td><input class="easyui-textbox" type="text" name="costPrice" data-options="required:true"/></td>
            </tr>
            <tr>
                <td> 售价:</td>
                <td><input class="easyui-textbox" type="text" name="salePrice" data-options="required:true"/></td>
            </tr>
            <tr>
                <td> 单位:</td>
                <td>
                    <input class="easyui-combobox" name="unit.id"
                           data-options="valueField:'id',textField:'name',url:'/systemdictionarydetail/findAllUnit',panelHeight:'auto',required:true"/>
                </td>
            </tr>
            <tr>
                <td> 品牌:</td>
                <td>
                    <input class="easyui-combobox" name="brand.id"
                           data-options="valueField:'id',textField:'name',url:'/systemdictionarydetail/findAllBrand',panelHeight:'auto',required:true"/>
                </td>
            </tr>
            <tr>
                <td>类型:</td>
                <td>
                    <input class="easyui-combobox" name="types.id"
                           data-options="groupField:'group',valueField:'id',textField:'name',panelHeight:'auto',url:'/producttype/findChildren'">
                </td>

            </tr>
            <tr>
                <td>图片:</td>
                <td>
                    <input class="easyui-filebox" name="fileImage" style="width:200px"
                           data-options="prompt:'选择一个图片...',buttonText: '选择图片'"/>
                </td>

            </tr>
        </table>
    </form>
    <div id="btns">
        <a href="javascript:;" data-method="save" class="easyui-linkbutton c3" data-options="iconCls:'icon-ok'">确定</a>
        <a href="javascript:;" data-method="close" class="easyui-linkbutton c5"
           data-options="iconCls:'icon-cancel'">取消</a>
    </div>
</div>

3.2、ProductController

  //保存方法，返回一个json :{success:true/false,msg:xxx}
    @RequestMapping("/save")
    @ResponseBody
    public JsonResult save(Product product, MultipartFile fileImage, HttpServletRequest req) {
        return saveOrUpdate(product, fileImage,req);
    }

  //解决数据丢失
    @ModelAttribute("xxUpdate")
    public Product xxUpdate(Long id, String _cmd) {
        if (_cmd != null) {
            Product product = productService.findOne(id);
            return product;
        }
        return null;
    }

    //将保存和修改两个方法合并
    public JsonResult saveOrUpdate(Product product, MultipartFile fileImage,HttpServletRequest req) {
        uploadImage(product, fileImage, req);
        try {
            product.setIsdelete(1L);
            productService.save(product);
            return new JsonResult();
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResult(false, e.getMessage());
        }
    }

上传图片

 public void uploadImage(Product product, MultipartFile fileImage, HttpServletRequest req) {
       //判断是否有上传图片
        if (!"".equals(fileImage.getOriginalFilename())) {
            String webapp = req.getServletContext().getRealPath("/");
            //图片存在就把它给删除掉
            Long id = product.getId();
            if (id != null) {
                Product oldPro = productService.findOne(id);
                if (StringUtils.isNotBlank(oldPro.getPic())) {
                    File deleteFile = new File(webapp, oldPro.getPic());
                    if (deleteFile.exists()) {
                        deleteFile.delete();
                    }
                }
                if (StringUtils.isNotBlank(oldPro.getSmallPic())) {
                    File deleteFile2 = new File(webapp, oldPro.getSmallPic());
                    if (deleteFile2.exists()) {
                        deleteFile2.delete();
                    }
                }
            }
            try {
                // 上传文件命名,拷贝到webapp的位置,设置pic到product
                Date date = new Date();
                // 大小图的路径+文件名称
                String fileName = "/upload/" + sdf.format(date) + ".png";
                String smallFileName = "/upload/" + sdf.format(date) + "_small.png";
                // 大小图的在服务器上面的物理路径
                File destFile = new File(webapp, fileName);
                File smallDestFile = new File(webapp, smallFileName);

                // 生成upload目录
                File parentFile = destFile.getParentFile();
                if (!parentFile.exists()) {
                    parentFile.mkdirs();// 自动生成upload目录
                }
                // 把上传的临时图片，复制到当前项目的webapp路径
                //FileUtils.copyFile(upload, destFile);
                FileCopyUtils.copy(fileImage.getInputStream(), new FileOutputStream(destFile));
                // 处理缩略图
                //Thumbnails.of(upload).scale(0.1F).toFile(smallDestFile);
                Thumbnails.of(fileImage.getInputStream()).scale(0.1F).toFile(smallDestFile);
                // 把大小图的相对webapp的路径设置到数据库产品表里面
                product.setPic(fileName);
                product.setSmallPic(smallFileName);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }else {
            Long id = product.getId();
            if (id!=null){
                Product product1 = productService.findOne(id);
                product.setPic(product1.getPic());
                product.setSmallPic(product1.getSmallPic());
            }
        }

    }

4、修改

4.1、product.js

主要是回显

 edit() {
            //获取选择的行
            var row = datagrid.datagrid("getSelected");
            //判断是否选择了一行
            //没有选择提示并结束
            if (!row) {
                $.messager.alert('提示', '请先选择一行进行修改', "info");
                return;
            } else {  
                //修改添加框的标题
                editDialog.dialog({title: '修改用户'});
                //把添加框(editDialog)打开
                editDialog.dialog("center").dialog("open");
                //单位回显
                if (row.unit) {
                    row["unit.id"] = row.unit.id;
                } else {
                    row["unit.id"] = "";
                }
                //类型回显
                if (row.brand) {
                    row["brand.id"] = row.brand.id;
                } else {
                    row["brand.id"] = "";
                }
                //品牌回显
                if (row.types) {
                    row["types.id"] = row.types.id;
                } else {
                    row["types.id"] = "";
                }
                //回显其他内容
                editForm.form('load', row);
            }
        },