layui上传图片

注:本示例上传图片,设计数据库的部分未展示,如需向数据库保存图片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 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 result = new HashMap();
        result.put("code", code);
        result.put("mff", mff);
        writeJSON(response, result);
    }

二、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<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>

<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 = $([ ''">', '' + file.name + '', '' + (file.size / 1014).toFixed(1) + 'kb', '等待上传', '', '', '', '', ''] .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('上传成功'); 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('文件名已存在'); 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('上传失败'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); }); 

三、效果图

1.运行后页面如下图
layui上传图片_第1张图片

2.点击选择文件按钮,选择一张图片
layui上传图片_第2张图片

3.点击开始上传,上传成功后如下图
layui上传图片_第3张图片

你可能感兴趣的:(javaweb,java,layui)