码迷,mamicode.com
首页 > Web开发 > 详细

layui的上传图片

时间:2018-11-10 00:59:16      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:auto   ring   type   gen   http   common   fun   html   function   

前台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包里面的方法,把得到的文件流复制到对应的路径里面去,还设置文件的名称。
 

layui的上传图片

标签:auto   ring   type   gen   http   common   fun   html   function   

原文地址:https://www.cnblogs.com/fuckingPangzi/p/9937777.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!