layui上传图片

来源：互联网发布：复杂java程序代码编辑：程序博客网时间：2024/06/05 22:28

注：本示例上传图片，设计数据库的部分未展示，如需向数据库保存图片URL只需在controller中code=0；后调用存储路径的接口即可
一、controller代码

@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)    public void uploadImg(HttpSession session, HttpServletRequest request, HttpServletResponse response)            throws IOException {        MultipartFile mf = null;        File mff = null;        int code = -1;        if (!(request instanceof MultipartHttpServletRequest)) {            String errorMsg = "your post form is not support ENCTYPE='multipart/form-data' ";            log.error(errorMsg);            throw new RuntimeException(errorMsg);        }        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;        List<MultipartFile> multipartFiles = multipartRequest.getFiles("file");        if (null != multipartFiles && multipartFiles.size() > 0) {            for (int i = 0; i < multipartFiles.size(); i++) {                mf = multipartFiles.get(i);                String originalFilename = mf.getOriginalFilename();// 图片名                String realPath = "D:/MLT_ZNJZ/Intelligent/exlborrow/" + originalFilename;// 全路径                File source = new File(realPath);                if (source.exists()) {                    mff = source;                    code = 1;                } else {                    try {                        mf.transferTo(source);                        mff = source;                        code = 0;                        log.debug("Upload file " + source.getAbsoluteFile() + " Success!");                    } catch (Exception e) {                        log.error("Upload file " + source.getAbsoluteFile() + " Error!" + e.getMessage());                        // throw new RuntimeException("Upload file " +                        // source.getAbsoluteFile() + " Error!" +                        // e.getMessage());                    }                }            }        }        Map<String, Object> result = new HashMap<String, Object>();        result.put("code", code);        result.put("mff", mff);        writeJSON(response, result);    }

二、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css"/></head><body style="padding:15px;">        <div class="layui-upload">        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>        <button type="button" class="layui-btn" id="testListAction" style="position: absolute;right: 15px;">开始上传</button>        <div class="layui-upload-list">            <table class="layui-table">                <thead>                    <tr>                        <th>文件名</th>                        <th>大小</th>                        <th>状态</th>                        <th>操作</th>                    </tr>                </thead>                <tbody id="demoList"></tbody>            </table>        </div>    </div></body><!-- 引入js --><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/layui/layui.js"></script><script type="text/javascript">var folderUrl="D:/MLT_ZNJZ/Intelligent/exlborrow";//上传图片layui.use('upload', function(){    var $ = layui.jquery,upload = layui.upload;    var files =null;    upload.render({        elem : '#testList',        url : 'borrow/uploadImg',        multiple : true,        auto : false,        accept: 'file', //普通文件        exts: 'jpg|png', //只允许上传压缩文件        bindAction : '#testListAction',        choose : function(obj) {            files = obj.pushFile(); //将每次选择的文件追加到文件队列            //读取本地文件            obj.preview(function(index, file,result) {                var tr = $([                        '<tr id="upload-'+ index +'">',                        '<td>' + file.name + '</td>',                        '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',                        '<td>等待上传</td>',                        '<td>',                        '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>',                        '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>',                        '</td>', '</tr>']                        .join(''));                //单个重传                tr.find('.demo-reload').on('click',function() {obj.upload(index,file);});                //删除                tr.find('.demo-delete').on('click',function() {delete files[index];tr.remove();});                $('#demoList').append(tr);            });        },        done : function(res, index, upload) {            if (res.code == 0) { //上传成功                var tr = $('#demoList').find('tr#upload-' + index),                 tds = tr.children();                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');                tds.eq(3).html('');                delete files[index];//删除队列已经上传成功的照片                //上传成功调用方法显示 用户信息和图片                parent.location.reload();                return;            }else if (res.code == 1) { //文件已经存在                var tr = $('#demoList').find('tr#upload-' + index),                 tds = tr.children();                tds.eq(2).html('<span style="color: #ff9800;">文件名已存在</span>');                tds.eq(3).html('');                return;            }            this.error(index, upload);        },        error : function(index, upload) {            var tr = $('#demoList').find('tr#upload-'+ index), tds = tr.children();            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传        }    });});

三、效果图

1.运行后页面如下图
这里写图片描述

2.点击选择文件按钮，选择一张图片

3.点击开始上传，上传成功后如下图
这里写图片描述

阅读全文

0 0