本文共 2468 字，大约阅读时间需要 8 分钟。

一.前端数据提交

在springmvc.xml文件里面加入下面内容:

接着我们对文件上传添加消息响应:

接下来我们需要用到下面的js文件(放在web目录下面):

链接：https://pan.baidu.com/s/13GQYKB7smO9AWwCS73SzEQ

提取码：baro

接下来我们引入Jquery(Jquery可以参见)

<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js">

<script src="${pageContext.request.contextPath}/js/jquery.form.js">

我们为form表单起一个id:

接下来我们可以完成我们的submitImage()函数来完成文件的上传的功能。

注意$("#itemsForm").ajaxSubmit(options)在调用之后不仅会提交我们data设置的

name:"jack",password:"123456"

同时也会把整个表单的数据都提交。接下来就是后端接受数据然后保存文件即可。

二.后端保存文件

首先我们需要新建一个UploadController

@Controller@RequestMapping("upload")public class UploadController {
     @RequestMapping("itemspic")//这里返回值是void代表不向浏览器返回页面   public void itemspic(HttpServletRequest request){
   		   }}

我们接下来就是在itemspic方法里面做一些手脚来保存文件了。

//1.获取文件对象 //先进行强转，这样就可以通过方法来获取文件 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request; //在edit.jsp里面我们给fie命名为ilePic1,这样我们就获取了文件对象了 MultipartFile file = multipartRequest.getFile("filePic1"); //获取data里面设置的username与password（即jack与123456） System.out.println(request.getParameter("username")+" "+request.getParameter("password")); //获取上传文件流 InputStream inputStream = file.getInputStream(); //我们把文件上传到部署的实际项目路径上,这样也方便后面功能的拓展，我们放到upload文件加下面 //这个地方实际是D:\\IDEA_Workspace\\SSM\out\\artifacts\\web_war_exploded\\upload String realPath = request.getServletContext().getRealPath("/upload"); //对于上面这个文件夹我们需要去创建,z这样方便写入 File myFile = new File(realPath); if(!myFile.exists()){
        myFile.mkdirs(); } //getOriginalFilename()获取文件的全名,但是直接使用文件的名字，那么我们上传同样的文件时会被覆盖掉，这不是我们希望的String realFileNme = UUID.randomUUID().toString()+file.getOriginalFilename();realPath+="\\"+realFileNme; //接下来我们获取输出流 FileOutputStream fileOutputStream = new FileOutputStream(realPath); FileCopyUtils.copy(inputStream,fileOutputStream);

成功！！！！！

三.图片显示讲解

前面我们的主要工作就是把客户端的数据传给位服务器并将其保存在了服务器，接下来我们的工作就是把让获取的图片在我们下面这个地方显示

由于我们需要返回数据因此: 上面两种都可，我选择后者。 接下来继续在itemspic方法里面写代码:

//接下来要实现页面的回显展示,那么我们需要把图片的路径告诉浏览器，注意url也要引起来String json = "{\"url\":"+"\"http://localhost:8080/upload/"+realFileNme+"\"}";printWriter.write(json);

关于url也要引起的缘由可参见

接下来： 这样方便我们修改路径:

success:function (resData) {
         //这里的resData由于dataType的设置直接为文本内容       //现在需要把resData转为json对象方便获取路径  		  alert(resData)          var jsonObj = $.parseJSON(resData);          alert(jsonObj)          alert(jsonObj.url)          $("#myImg").prop("src",jsonObj.url)          console.log(resData)  },

接下来我们上传这张图片:

我留了一个小坑给读者去实现:这里我没有将图片路径保存到数据库,这里交给读者。

转载地址：http://kalzi.baihongyu.com/