插入前端代码 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"></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