SpringMvc uploads local pictures, saves them in the database and displays them in real time

Table of contents

need:

Multi-component type analysis in springmvc

step 1

step 2

step 3

step 4

---

need:

On the page of modifying products, add the function of uploading product pictures

Multi-component type analysis in springmvc

When submitting the data of enctype="multipart/form-data" in the page form, the multipart type data needs to be parsed.

step 1

Add the required jar package

step 2

Configure the multipart type resolver in the springmvc.xml file:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置字符编码防止文件名乱码-->
        <property name="defaultEncoding" value="utf-8"/>
        <!--设置单个上传文件的大小，单位是字节b-->
        <property name="maxUploadSize" value="1048576"/>
    </bean>

step 3

write controller interface

@RequestMapping("/fileUpload.do")
    public String upload(@RequestParam("file") MultipartFile file,Equipment equipment, HttpServletRequest request) throws Exception {
        /** 项目目录 */
        String filePath = request.getServletContext().getRealPath("/");
        System.out.println("文件路径：" + filePath);
        file.transferTo(new File(filePath + "upload/" + file.getOriginalFilename()));
        equipment.setPhotos("http://127.0.0.1:8080/EquipmentSys_war_exploded/upload/"+file.getOriginalFilename());
        if (equipment.getId() == null) {
            equipmentService.add(equipment);
        } else {
            equipmentService.update(equipment);
        }
        return "redirect:/equipment/list.do";
    }

step 4

write jsp code

<form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/equipment/fileUpload.do"
              onsubmit="return chechForm()" enctype="multipart/form-data">

            <div class="form-group">
                <label class="col-sm-2 control-label">设备描述：</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" id="remark" name="remark">${equipment.remark}</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">设备照片：</label>
                <div class="col-sm-10">
                    <input id="file" type="file" name="file">
                    <br/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="hidden" id="id" name="id" value="${equipment.id}"/>
                    <button type="submit" class="btn btn-primary">保存</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" onclick="resetValue()">重置</button>&nbsp;&nbsp;
                    <font color="red" id="error"></font>
                </div>
            </div>
        </form>

Complete code download:

SpringMvc uploads local pictures, saves them to the database and displays them in real time-Java Document Resources-CSDN Download SpringMvc uploads local pictures, saves them to the database and displays them in real time For more download resources and learning materials, please visit the CSDN download channel. https://download.csdn.net/download /qq_18620233/85313143