layui上传图片、回显、预览

最新推荐文章于 2024-05-04 09:47:20 发布

yjm2017

最新推荐文章于 2024-05-04 09:47:20 发布

阅读量6.7k

点赞数 3

分类专栏： web前端文章标签： layui图片上传

本文链接：https://blog.csdn.net/sxl2017/article/details/103641290

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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="http://java.sun.com/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">&#xe67c;</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) 
     @ResponseBody
     public 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;
         }

yjm2017

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui上传图片、回显、预览

jsp页面： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+"...
复制链接

扫一扫