❤️SpringMVC框架使用jquery-form实现图片上传

小明的学习圈子2023-11-26后端文件操作

1、springMVC配置文件上传解析器

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="UTF-8">
<property name="maxUploadSize" value="2097152"/>
<property name="resolveLazily" value="true"/>
</bean>

2、引入jquery.form.js插件

img

注意这里img文件夹下必须要有一个文件,否则上传的图片上传不到这里,名称随意。

img

3、jsp表单数据

  • 使用表单文件域完成文件上传

    <input type="file" name="xxxx">
    
  • 表单必须采用POST方式提交数据,因为文件数据放置在请求体中传递,GET方式处理不了,没有请求体

  • 文件上传采用特殊的方式传递数据,而不是普通的名值对方式,

  • 采用多部件方式提交, 所以在表单标签中需要增加特定属性 enctype="multipart/form-data"

<html>
 <head></head>
 <body>
  <form id="advertForm" method="post" action="" enctype="multipart/form-data"> 
   <div class="form-group"> 
    <label for="advertImgTemp">广告图片</label> 
    <input type="file" class="form-control" id="advpic" name="advertImgTemp" placeholder="请输入广告图片" /> 
   </div> 
   <button id="saveBtn" type="button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 新增</button> 
   <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button> 
  </form>
 </body>
</html>

4、js文件ajax异步提交

$(function() {
    $("#saveBtn").click(function() {

        var options = {
            url: "${CWF_PATH}/advert/doAdd.do",
            beforeSubmit: function() {
                loadingIndex = layer.msg('数据正在保存中', {
                    icon: 6
                });
                return true; //必须返回true,否则,请求终止.
            },
            success: function(result) {
                layer.close(loadingIndex);
                if (result.success) {
                    layer.msg("广告数据保存成功", {
                        time: 1000,
                        icon: 6
                    });
                    window.location.href = "${CWF_PATH}/advert/index.htm";
                } else {
                    layer.msg("广告数据保存失败", {
                        time: 1000,
                        icon: 5,
                        shift: 6
                    });
                }
            }
        };

        $("#advertForm").ajaxSubmit(options); //异步提交
        return;

    });
});

5、java文件实现文件上传方法

/******************************
 * 用途说明:
 * 作者姓名: Administrator
 * 创建时间: 2022-10-15 21:48
 ******************************/
public class T {
    @ResponseBody
    @RequestMapping("/doAdd")
    public Object doAdd(HttpServletRequest request, Advertisement advert ,HttpSession session) {
        AjaxResult result = new AjaxResult();
        try {
            MultipartHttpServletRequest mreq = (MultipartHttpServletRequest)request;

            MultipartFile mfile = mreq.getFile("advertImgTemp");//advertImgTemp是input file的name的值

            String name = mfile.getOriginalFilename();//上传文件的名称
            String extname = name.substring(name.lastIndexOf(".")); //取得.jpg

            String imgPath = UUID.randomUUID().toString()+extname; //重新命名图片名字

            ServletContext servletContext = session.getServletContext();

//realpath D:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\crowdfunding-main\advert
            String realpath = servletContext.getRealPath("/advert");

//path D:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\crowdfunding-main\advert\img\2cafef49-3827-4afe-9ff6-b89b0f931575.jpg
            String path =realpath+ "\\img\\"+imgPath;

            mfile.transferTo(new File(path)); //文件上传.

            User user = (User)session.getAttribute(ConstUtil.LOGIN_USER);
            advert.setUserid(user.getId());
            advert.setStatus("1");
            advert.setIconpath(imgPath);

            advertService.addAdvert(advert);
            result.setSuccess(true);
        } catch ( Exception e ) {
            result.setSuccess(false);
            result.setMessage("上传图片失败");
            e.printStackTrace();

        }

        return result;
    }
}
Last Updated 2024/4/6 11:55:17