使用layui上传图片

插入前端代码  jsp

<link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all">
<div class="table-box box2">
            <h3><span>上传图片</span></h3>
            <p class="p1"><a id="photo" class="img"><!-- <img src="images/member_pic1.jpg" /> --></a></p>
            <div class="p2">
                <script src="lib/jquery/1.9.1/jquery.js"></script>
                <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图片</button>
                <script src="lib/layer/ui/layui.js"></script>
                <script>
                    layui.use('upload', function(){
                        var upload = layui.upload;
                      //执行实例
                        var uploadInst = upload.render({
                            elem: '#upload' //绑定元素
                            ,url: 'userController/addImage' //上传接口
                            ,method: 'POST'
                            ,accept: 'images'
                            ,done: function(res){
                                if(res.flag){
                                    $("#pic").val(res.url);
                                    alert(res.url);
                                    $("#photo").html("<img src="+res.url+" />")
                                }else{
                                alert("上传失败");
                                }
                            }
                            ,error: function(){
                                 alert("系统异常");
                            }
                         });
                    });
                </script>

插入前端异步代码

$("#submit").click(function(){
      var user=new Object();
      user.email=$("#email").val();
      user.password=$("#password").val();
      user.phone=$("#phone").val();
      user.perName=$("#perName").val();
      user.sex=$("#sex").val();
      user.age=$("#age").val();
      user.name=$("#name").val();
      user.IDNum=$("#IDNum").val();
      user.adr=$("#adr").val();
      user.pic=$("#pic").val();
      $.get("userController/addUser",user,function(date){
          if(date.flag){
              location.href="index.jsp";
          }else {
              alert("新增失败");
          }
      },"JSON")
  })

插入后端代码

@RequestMapping(value="addUser")
    @ResponseBody
    public String addUser(User user){
        int add = iUserService.add(user);
        return responseClient(add);
    }

公共类1

package com.qf.utils;

import java.text.SimpleDateFormat;

public class DateUtil {

    public static String toStr(long time) {
        SimpleDateFormat sFormat=new SimpleDateFormat("yyyyMMDDHHmmSS");
        String format = sFormat.format(time);
        return format;
    }

}

公共类2

package com.qf.utils;

import java.io.File;
import java.io.IOException;
import java.util.Date;

import org.springframework.web.multipart.MultipartFile;

public class FileUploadUtils {
    public static String uploadImage(MultipartFile file, String path) throws IOException {  
        String name = file.getOriginalFilename() ;  
        String suffixName = name.substring(name.lastIndexOf(".")) ;  
        Date date = new Date() ;  
        String hash = DateUtil.toStr(date.getTime());//给照片自定义一个名字，用时间做名称，不会重复  
        String fileName = hash + suffixName ;  
        File tempFile = new File(path, fileName) ;  
        if(!tempFile.getParentFile().exists()) {  
            tempFile.getParentFile().mkdirs() ;  
        }  
        tempFile.createNewFile() ;  
        file.transferTo(tempFile);  
        return tempFile.getName() ;  
    }  

}

@RequestMapping(value = "/addImage", method = RequestMethod.POST)
    @ResponseBody
    public String ramanage(@RequestParam("file") MultipartFile file,Model model,HttpServletRequest request){
        String url=null;
        try {  
            InputStream iStream=file.getInputStream();
            String path = request.getSession().getServletContext().getRealPath("/");  
            path = path + "images"; 
            String image = FileUploadUtils.uploadImage(file, path);
            FileOutputStream fStream=new FileOutputStream(path+File.separator+image);
            IOUtils.copy(iStream, fStream);
            fStream.close();
            url="images"+File.separator+image;
            if(image!=null) {   
                return renderResult(true, "上传成功",url);
            }else {  
                return renderResult(false, "上传失败",url) ;   
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }
        return renderResult(false, "上传失败",url) ;   
        
    }

 

来源：https://www.cnblogs.com/mike-JP/p/11338975.html