Layui利用Upload实现文件手动上传(附前后端代码)

前端代码内容,注意demo1只是为了预览图片用的,所以上传其他文件会报错

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../commons/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${layui_path}/css/layui.css"/>
    <script src="${layui_path}/layui.js"></script>
    <script src="${layui_path}/lay.modules/layer.js"></script>
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
    <input class="layui-btn" style="display: none" id="tt" value="111">
    <button type="button" class="layui-btn" id="test9">开始上传</button><br>
    <img class ="layui-upload-img" src="" id="demo1">
</div>
<script>
    layui.use(['upload', 'layer'], function () {
     
        var $ = layui.jquery
            , layer = layui.layer
            , upload = layui.upload;

        upload.render({
     
            elem: '#test8'
            , url: '${pageContext.request.contextPath}/dy/fileImp1'
            , auto: false
            //,multiple: true
            , bindAction: '#test9'
            , choose: function (obj) {
     
               // var file = this.files = obj.pushFile();
                obj.preview(function (index, file, result) {
     
                    document.getElementById("tt").style.display = "inline";
                    var xx = document.getElementById("tt").value = file.name+'【'+(file.size / 1024 / 1024).toFixed(2) + 'MB'+'】';
                    $("#demo1").attr('style','width:300px;heigth:400px');
                    $("#demo1").attr('src',result);

                })

            }
            , done: function (res) {
     
                if(res.code==0){
     

                    return layer.msg('上传失败-------');
                }else {
     
                  return  layer.msg('上传成功-------');
                }
            }
        });

    });

</script>
</body>
</html>

处理代码,没有使用缓存功能,注意返回类型一定要是Map类型,否则会提示结构异常

   @RequestMapping(value="/fileImp1",method = {
     RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    // 不返回json数据就要添加ResponseBody标签
    public Map<String,Object> fileImp1(@RequestParam("file") MultipartFile  file , HttpServletRequest request)  {
     
    String path = request.getSession().getServletContext().getRealPath("filePage");

        File newfile = new File(path, file.getOriginalFilename());
         Map map = new HashMap();
        System.out.printf(file.getOriginalFilename());

        try {
     
            file.transferTo(newfile);
            map.put("msg","OK");
            map.put("code",200);
        } catch (IOException e) {
     
            e.printStackTrace();
            map.put("msg","erro");
            map.put("code",0);
        }

        return map;
    }

上传前:
Layui利用Upload实现文件手动上传(附前后端代码)_第1张图片
选择文件后:
Layui利用Upload实现文件手动上传(附前后端代码)_第2张图片
点击上传成功后后会提示:
上传成功-------;
也可以在后面增加关闭上传窗口,刷新父页面;

                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);  // 关闭layer
                    parent.location.reload();//提交后刷新父页

你可能感兴趣的:(前段,layui,upload,文件上传)