Layui上传下载实现

Layui+SSM上传下载文件

上传Controller

 //上传
    @RequestMapping("/sc")
    @ResponseBody
    public String sc(@RequestParam("uploadFile")MultipartFile file, HttpServletRequest req, HttpServletResponse resp)throws IllegalStateException, IOException {
        System.out.println("进去上传方法");
        //判断上传文件是否为空,为空就跳转到失败页面
        // 获取文件存储路径(绝对路径)
        //String path=req.getServletContext().getRealPath("file");
        String path="D:\\公寓管理系统\\图片";
        // 获取原文件名
        String filename=file.getOriginalFilename();
        System.out.println(filename);
        // 创建文件实例
        File filepath=new File(path,filename);
        // 如果文件目录不存在,创建目录
        if (!filepath.getParentFile().exists()){
            filepath.getParentFile().mkdirs();
            System.out.println("创建目录" + filepath);
        }
        // 写入文件
        file.transferTo(filepath);
        //ReturnJsonData.returnJson(filename,resp);
        return filename;
    }

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="/view/layui/css/layui.css"/>
<body>
<form class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">患者编号:</label>
        <div class="layui-input-inline layui-col-md4">
            <input type="text" name="puser" id="puser" required lay-verify="required" placeholder="患者编号"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择上传文件类别</label>
        <div class="layui-input-block">
            <select name="uposition" lay-filter="aihao">
                <option value="0">遗传诊断报告</option>
                <option value="1">基因测序报告</option>
                <option value="2">诊断病例</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择上传文件</label>
        <input type="file" name="uploadFile" id="uploadFile">
        <button type="button" class="layui-btn" id="btn">开始上传</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注:</label>
        <div class="layui-input-block">
            <textarea name="remark" placeholder="上传文件信息...100个字符以内" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>
</body>
<script src="/view/js/jquery-3.3.1.js"></script>
<script src="/view/layui/layui.js"></script>
<!--ajax编写-->
<script>
​
</script>
</html>

下载

 /**
     * 下载
     * @return
     */
    @RequestMapping("/xz")
    @ResponseBody
    public ResponseEntity<byte[]> download(HttpServletRequest req,String filename,HttpServletResponse resp){
        System.out.println("进入方法");
        //文件地址在项目内部的(目的地地址信息)
        //String upload = req.getServletContext().getRealPath("file");
        //目的仓库在项目之外
/*        List<Map> map=service.xz();
        ReturnJsonData.returnJson(ResultJson.success(map),resp);*/
        Cases c=new Cases();
        c.setCid(3);
        Cases cases=service.findxz(c);
        //上传的前一半
        String upload = "D:\\公寓管理系统\\图片\\";
        filename=cases.getCaddress();
        System.out.println(upload);
        //先拼接具体的位置路径,然后通过file进行建立链接filename
        File file =new File(upload+File.separator+filename);
        if(!file.exists()){//如果不存在文件,直接返回null
            System.out.println(file);
            return null;
        }
        try {
            //创建标头文件对象
            HttpHeaders headers = new HttpHeaders();
            //解决乱码问题
            String downloadfile = new String(filename.getBytes(StandardCharsets.UTF_8),"iso-8859-1");
            //以下载的方式打开文件
            headers.setContentDispositionFormData("attachment", downloadfile);
            //二进制流
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            return new ResponseEntity<byte []>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 layui 的 upload 模块和 jquery 实现多图片上传。 1. 引入 layui 和 jquery: ``` <link rel="stylesheet" href="layui/css/layui.css"> <script src="jquery/jquery.min.js"></script> <script src="layui/layui.all.js"></script> ``` 2. 定义上传组件: ``` <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">上传图片</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图: <div class="layui-upload-list" id="preview"></div> </blockquote> </div> ``` 3. 初始化上传组件: ``` layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload', //绑定元素 multiple: true, //是否允许多文件上传 accept: 'images', //指定允许上传的文件类型 field: 'file', //设定文件域的字段名 url: '/upload/', //上传接口 done: function(res){ //上传完毕回调 console.log(res); $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">') }, error: function(){ //请求异常回调 } }); }); ``` 说明: - `elem`:绑定选择器,即上传按钮的选择器。 - `multiple`:是否允许多文件上传。 - `accept`:指定允许上传的文件类型。 - `field`:设定文件域的字段名。 - `url`:上传接口。 - `done`:上传完毕回调函数。 - `error`:请求异常回调函数。 4. 上传成功后,将图片预览在页面上: ``` $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">') ``` 说明: - `#preview`:预览图片的容器选择器。 - `res.url`:上传成功后返回的图片地址。 以上就是利用 layui 和 jquery 实现多图片上传的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值