zoukankan      html  css  js  c++  java
  • layui的上传图片

    前台html的代码:

    <div class="layui-form-item">
                <label class="layui-form-label">电影图片</label>
                <div class="layui-input-block">
                    <input type="hidden" name="imageName" value="${film.imageName}" required lay-verify="required" />
                    <button type="button" class="layui-btn" id="chooseImage">
                        <i class="layui-icon">&#xe67c;</i>选择文件
                    </button>
                    <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
                </div>
            </div>

    js的代码,很简单:

    upload.render({
                    elem: '#chooseImage'
                    ,url: '/admin/film/uploadImage'
                    ,accept: 'images'
                    ,auto: false
                    ,bindAction: '#uploadBtn'
                    ,done: function(res){
                        console.log(res);
                        console.log(res.newFileName);
                        // $("[name=imageName]").val(res.data.src);
                    }
                });

    官方文档里面说,done的回调参数有三个,res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)

    console.log(res.newFileName);这个打印出来的就是我传到前台的值了,截图如下

    后台代码如下:
    @RequestMapping("/uploadImage")
        public Map<String,Object> uploadImage(MultipartFile file, HttpServletRequest request)throws Exception{
            Map<String,Object> map = new HashMap<>();
            String fileName = file.getOriginalFilename();
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            String newFileName = DateUtil.getCurrentDateStr()+suffixName;
            FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imageFilePath+newFileName));
            map.put("newFileName" ,newFileName);
            return map;
        }
    FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imageFilePath+newFileName));
    这个方法是commons-io包里面的方法,把得到的文件流复制到对应的路径里面去,还设置文件的名称。
     
  • 相关阅读:
    zabbix(x)
    kvm 学习(三)存储池
    kvm 学习(二)镜像
    hadoop3.1.1:找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster
    (转)mysql更改数据目录
    (转)SLOW READPROCESSOR;ERROR SLOW BLOCKRECEIVER错误日志分析
    Linux下 为什么有时候使用sudo也提示没有权限
    (转)hadoop 常规错误问题(一)
    (转)SmartPing:一个服务器Ping值监测工具
    (转)hadoop 配置文件解释
  • 原文地址:https://www.cnblogs.com/fuckingPangzi/p/9937777.html
Copyright © 2011-2022 走看看