layui上傳文件帶參數前后台代碼


注意:請求上傳接口的額外參數。如:data: {id: 'xxx'} 從 layui 2.2.6 開始,支持動態值

前台代碼

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span >名稱</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" placeholder="請輸入名稱" class="layui-input">
        </div>
    </div>
        <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>文件:</label>
        <button type="button" class="layui-btn layui-btn-normal" id="test8">選擇文件</button>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test9">提交</button>
        </div>
    </div>
</form>

js代碼: 

upload.render({
        elem: '#test8'
        ,url: '/upimg'
        ,auto: false
        ,exts: 'png|jpg'
        ,acceptMime:"image/*"//規定打開文件選擇框時,篩選出的文件類型
        ,bindAction: '#test9'
        ,before: function(obj){
            layer.load(1, {
                content: '添加中...',
                success: function (layero) {
                    layero.find('.layui-layer-content').css({
                        'padding-top': '39px',
                        'width': '60px'
                    });
                }
            });
            this.data={"name":$("#name").val()};
        }
        ,done: function(res){
            layer.closeAll();
            if(res.code==0){
                layer.msg('添加成功', {
                    time: 1000,
                    icon: 1,
                    offset: '50px'
                }, function () {
                    location.reload()
                });
            }
        },error: function () {
            layer.closeAll('loading'); //關閉loading
            layer.msg('上傳失敗');
        }
    });

  Springboot 后台接口

    @PostMapping("/upimg")
    @ResponseBody
    public JSONObject userupimg(@RequestParam(value = "file")MultipartFile file, HttpServletRequest request) throws IOException {
        String name = request.getParameter("name");
        System.out.println(name);
        JSONObject res = new JSONObject();
        JSONObject resUrl = new JSONObject();
        String filename = UUID.randomUUID().toString().replaceAll("-", "");
        String ext = FilenameUtils.getExtension(file.getOriginalFilename());
        String filenames = filename + "." + ext;
        String pathname = "D:\\imgs\\" + filenames;
        file.transferTo(new File(pathname));
        resUrl.put("src", filenames);
        res.put("msg", "");
        res.put("code", 0);
        res.put("data", resUrl);
        return res;
 }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM