如何使用sprimgMvc上传文件?

来源:互联网 发布:破解版阅读软件 编辑:程序博客网 时间:2024/06/06 18:59

后端框架使用springMvc, 与前端页面进行交互 , 涉及到图片,文本等文件的上传功能 , 页面使用jsp页面


页面部分 , 使用表单提交 , 并要求后端返回json格式的数据, 这样可以获取后端处理信息, 以便于在页面进行信息提示 .


表单部分代码如下 :

<form id="pageListForm" class="form-horizontal" enctype="multipart/form-data">              <div class="box-body">                              <div class="form-group">                  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>                  <div class="col-sm-10">                    <input type="text" class="form-control" name="t_email" style="width: 450px">                  </div>                </div>                <div class="form-group">                  <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>                  <div class="col-sm-10">                    <input type="text" class="form-control" name="t_userName" style="width: 450px">                  </div>                </div>                                <div class="form-group">                  <label for="inputEmail3" class="col-sm-2 control-label">头像</label>                  <div class="col-sm-10">                    <input type="file" onchange="PreviewheadImage(this);" name="headImg" style="width: 350px;height: 35px">                  </div>                </div>                <div class="form-group">                  <label for="inputPassword3" class="col-sm-2 control-label">头像预览</label>                  <div class="col-sm-10">                     <img id="headImg" alt="" src="" style="width: 300px;height: 200px">                  </div>                </div>                                                <div class="form-group">                  <label for="inputEmail3" class="col-sm-2 control-label">背景图</label>                  <div class="col-sm-10">                    <input type="file" onchange="PreviewbackgroundImage(this);" name="backgroundImg" style="width: 350px;height: 35px">                  </div>                </div>                <div class="form-group">                  <label for="inputPassword3" class="col-sm-2 control-label">背景图预览</label>                  <div class="col-sm-10">                     <img id="backgroundImg" alt="" src="" style="width: 300px;height: 200px">                  </div>                </div>                              </div>                            <!-- /.box-body -->              <div class="box-footer">                <button type="button" class="btn btn-default">取消</button>                <button type="button" onclick="saveTeacher();" class="btn btn-info">确定</button>              </div>              <!-- /.box-footer -->    </form>

注意部分 :

1 , 该form表单 要设置 enctype="multipart/form-data" , 为什么要设置这个?

2, 如果<button> 直接设置为submit, 则该表单直接提交到后端, 后端处理结果如何返回给前端,告诉用户操作是成功还是失败 ?

3, 如何提交form表单 , 能让后端返回json格式的数据 ?


方案如下 :

  //保存轮播图  function saveTeacher(){    var formData = new FormData($("#pageListForm")[0]);    $.ajax({url : "${ctx}/platform/saveTeacherInformation.do",type : 'POST',data : formData,async : false,cache : false,contentType : false,processData : false,success : function(data) {showMessageDialog(data.msg);},error : function(data) {showMessageDialog("网络异常");}  });  }

1, 什么是FormData ?

2, 通过new FormData 为什么可以将数据提交到后端 ?


后端 springMvc的控制器 接受前端请求

/** * 保存老师信息 * @param request * @return */@ResponseBody@RequestMapping("/saveTeacherInformation.do")public AjaxResult saveTeacherInformation(HttpServletRequest request,@RequestParam("headImg") MultipartFile headImgFile,@RequestParam("backgroundImg") MultipartFile backgroundImgFile){AjaxResult saveTeacherInformation = null ;try {saveTeacherInformation = teacherService.saveTeacherInformation(request,headImgFile,backgroundImgFile);} catch (Exception e) {e.printStackTrace();return AjaxResult.errorResult("保存失败");}return saveTeacherInformation;}

1, 通过 @RequeatParam("属性名" ) MultipartFile file , 接受前端传递相应属性名的File文件 , 格式为 MultipartFile

2 , MultipartFile 是什么格式的文件 ? 与 File 有什么区别 ?

3, 如何操作这个MultipartFile , 将文件保存到服务器上 ?


运行报错  :

  Expected MultipartHttpServletRequest: is a MultipartResolver configured?

翻译 : 这是是一个multipartresolver配置吗 ?  意思是不是multipartresolver 配置 , 为什么?


springMvc上传文件 需要配置 :

<!-- springMvc上传文件 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  <property name="maxUploadSize" value="500000000000"/></bean>

1,  需要引入jar包 : commons-fileupload-X.X.jar

2, 配置这个是做什么的 ?


可见 , 我有很多的困惑