jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib prefix="c" uri="/jsp/jstl/core" %><!DOCTYPE html><html><head><meta charset="utf-8"><title>上传图片demo</title><script type="text/javascript" src="<%=path %>/skin/jquery.js"></script><script type="text/javascript" src="<%=path %>/skin/layer/layer.js"></script><link rel="stylesheet" href="<%=path %>/skin/js/bootstrap.min.css" type="text/css"><script type="text/javascript" src="<%=path %>/skin/js/bootstrap.min.js"></script><link rel="stylesheet" href="<%=path %>/skin/layui/css/layui.css" media="all"><script src="<%=path %>/skin/layui/layui.js"></script><script>layui.use('upload', function(){ var upload = layui.upload , $ = layui.jquery;//上传图片var uploadInst = upload.render({ elem: '#uploadPic' //绑定元素 ,url: 'xunpan/uploadFile' //上传接口 [[@{/upload/img}]],auto: false,exts: 'doc|docx|pdf|jpg|jpeg|png|zip|',bindAction: '#uploadPicBtn',before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#preShow').attr('src', result); //图片链接（base64） }); } ,done: function(res){ //上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 if(res.code == 0){$('#aftershow').attr('src', "/uploadFile/"+res.data);document.getElementById("img_url").value = res.data; return layer.msg('上传成功'); }} ,error: function(re){ var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); } );</script></head><body><div class="layui-form-item"> <label class="layui-form-label">照片</label> <div class="layui-input-block"> <!-- 上传按钮 --><button type="button" class="layui-btn" id="uploadPic"><i class="layui-icon"></i>选择图片</button> <button type="button" class="layui-btn layui-btn-warm" id="uploadPicBtn">开始上传</button><!-- 隐藏的input,一个隐藏的input（用于保存文件url） --><input type="hidden" id="img_url" name="img" value=""/> <img class="layui-upload-img" width="100px" height="80px" id="aftershow"/> <!-- 预览区域 --><div class="layui-upload-list"> <img class="layui-upload-img" width="100px" height="80px" id="preShow"/> <p id="demoText"></p> </div></div> </div></body></html>
java后台：
//图片上传控制器@RequestMapping(value = "/uploadFile" , method = RequestMethod.POST) @ResponseBodypublic Map uploadPicture(@RequestParam("file")MultipartFile file,HttpServletRequest servletRequest) throws IOException { Map res = new HashMap();//上传文件路径 String path = servletRequest.getServletContext().getRealPath("/upload");System.out.println("文件名称"+file.getOriginalFilename()); //上传文件名 String name = file.getOriginalFilename();//上传文件的真实名称String suffixName = name.substring(name.lastIndexOf("."));//获取后缀名// String hash = Integer.toHexString(new Random().nextInt());//自定义随机数（字母+数字）作为文件名String hash = UUID.randomUUID().toString().replaceAll("-","");String fileName = hash + suffixName; File filepath = new File(path, fileName); System.out.println("随机数文件名称"+filepath.getName()); //判断路径是否存在，没有就创建一个 if (!filepath.getParentFile().exists()) { filepath.getParentFile().mkdirs(); } //将上传文件保存到一个目标文档中 File tempFile = new File(path + File.separator + fileName);file.transferTo(tempFile);// resUrl.put("src", tempFile.getPath());res.put("code", "0");res.put("msg", "");res.put("data", tempFile.getName());return res;}
