zoukankan      html  css  js  c++  java
  • SpringBoot基于layui实现文件上传

    配置

    application.yml

    spring:
      servlet:
        multipart:
          max-file-size: 20MB
          max-request-size: 20MB
    save-image-path: D:SoftwaresMajorIDEAProjectsMovie_Systemsrcmain
    esources
    esourcesupload

    controller.java

    @Value("${save-image-path}")
        public String path;
        @RequestMapping("uploadImage")
        @ResponseBody
        private String uploadImage(@RequestParam("file") MultipartFile file, HttpServletRequest request){
            String originalFilename = file.getOriginalFilename();
            System.out.println(originalFilename);
    //        String path1 =request.getServletContext().getRealPath("public")+"/" + originalFilename;
    //        String path2 =request.getServletContext().getRealPath("");
            try {
                file.transferTo(new File(path+ File.separator + originalFilename));
            } catch (IOException e) {
                e.printStackTrace();
                return "fail";
            }
            return "success";
        }

    test.html

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>拖拽上传</legend>
    </fieldset>
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <div class="layui-hide" id="uploadDemoView"></div>
        <p>点击上传,或将文件拖拽到此处</p>
            <img src="" alt="上传成功后渲染" style="max- 196px" id="demo1">
            <input id="file" type="hidden" >
    
    </div>
        <button class="layui-btn" id="uploadImage">上传</button>
    
    <script>
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload
            //拖拽上传
            var file1;
            upload.render({
                elem: '#test10'
                ,auto: false
                ,bindAction:"#uploadImage"
                , choose: function (obj) {
                    //预读本地文件
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result);
                        // file = $('#file')[0].files[0];
                        file1=file;
                    })
                }
            });
            $("#uploadImage").click(function (){
                var formData = new FormData();
                formData.append("file",file1);
                $.ajax({
                    type:'post',
                    url: '/uploadImage',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:function (result) {
                        if (result==="success"){
                            alert("成功");
                        }
                        else {
                            alert("失败");
                        }
                    }
                });
            })
        })
    </script>

  • 相关阅读:
    python 17 函数基础(一)
    python 17 异常
    python 16 文件操作(二)
    python 15 文件操作(一)
    python 13 字符编码
    《转》python 12 列表解析
    《转》python 11 表达式和语句
    关于int型数据的SQL模糊查询猜想
    PB学习笔记
    JSONObject.fromObject()
  • 原文地址:https://www.cnblogs.com/MoooJL/p/14842559.html
Copyright © 2011-2022 走看看