LayUi实现图片上传

最新推荐文章于 2024-02-03 15:48:16 发布

Whisper~~~

最新推荐文章于 2024-02-03 15:48:16 发布

阅读量177

点赞数

文章标签： java spring boot

本文链接：https://blog.csdn.net/L_IK_Y/article/details/118978378

版权

LayUi实现图片上传

前端代码
Controller层

前端代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1" width="100px" height="100px">
        <p id="demoText"></p>
    </div>
    <div style="width: 95px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>
</div>

<script>
        layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
                elem: '#test1'
                ,url: '/upload'
                ,accept:'file'
                ,size:50000
                ,multiple:true
                ,before: function(obj){
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result);
                    });
                }
                ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                return layer.msg('上传失败');
                }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                fileupload.attr("value",res.data.src);
                console.log(fileupload.attr("value"));
                }
                ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        });
</script>
</body>
</html>

Controller层

@Controller
public class ProjectController {

//    图片上传
    @RequestMapping("/上传图片")
    public String photo(){
        return "/project/上传图片";
    }

    @RequestMapping("/upload")
    @ResponseBody
    public Object upload(MultipartFile file, HttpServletRequest request){
        //返回数据格式
        Map<String,Object> map = new HashMap<>();
        Map<String,Object> map2 = new HashMap<>();
        map.put("code",0);
        map.put("msg","");
        map.put("data",map2);

        String path = null;
        if(file!=null){
//           获得图片路径
            path = "M:/lcy/student/src/main/resources/static/img/"+file.getOriginalFilename();
            map2.put("src",path);
        }
        try {
            File files = new File(path);
            System.out.println(path);
            if(!files.getParentFile().exists()){
                files.getParentFile().mkdirs();
            }
            file.transferTo(files);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return map;
    }
}

Whisper~~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
LayUi实现图片上传

LayUi实现图片上传前端代码Controller层前端代码<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8"> <title>upload模块快速使用</title> <link rel="stylesheet" th:href="@{/layui/css/layui.css}"
复制链接

扫一扫