layui 上传图片后将返回的数据放到表单中，再保存form表单数据，带有图片放大查看

最新推荐文章于 2023-04-19 20:01:37 发布

1°叁柒

最新推荐文章于 2023-04-19 20:01:37 发布

阅读量923

点赞数

分类专栏： layui 上传文件 form表单文章标签： LayUI jquery

本文链接：https://blog.csdn.net/zhu_nana/article/details/107254972

版权

layui 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

上传文件

1 篇文章 0 订阅

订阅专栏

form表单

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<html>
<head>
    <meta charset="UTF-8">
    <title>房源编辑</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath %>/assets/layui/css/layui.css">
    <link rel="stylesheet" href="<%=basePath %>/css/scroll-bar.css">
    <link rel="stylesheet" href="<%=basePath %>/css/sub-page.css">
    <link rel="stylesheet" href="<%=basePath %>/assets/nprogress/nprogress.css">
    <link rel="stylesheet" href="<%=basePath %>/assets/jquery-fancybox/style/jquery.fancybox-1.3.1.css">
    <style type="text/css">
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
        .imgDiv { float:  left;position: relative;}
        .imgDiv img {cursor: pointer;}
        .imgDiv span{position:absolute;right:10px;}
    </style>
</head>
<body>
<div class="ok-body">
    <form class="layui-form  layui-form-pane">
        <div class="layui-row">
            <div class="layui-col-md6">
                <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="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <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="address" lay-verify="required" placeholder="请选择区域" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-upload">
            <div class="layui-col-md12">
                <div class="layui-upload-list in-ne" id="demo2"></div>
                <input type="text" id="uploadHid" name="uploadHid" />
            </div>
        </div>
        <div class="layui-row">
            <button type="button" class="layui-btn" id="test2">图片上传</button>
            <button class="layui-btn" lay-submit="" type="submit" id="test3" lay-filter="formDemo">
                <i class="layui-icon">&#xe61f;</i>保存
            </button>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="<%=basePath %>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath %>/assets/layui/layui.js"></script>
<script src="<%=basePath %>/assets/nprogress/nprogress.js"></script>
<script src="<%=basePath %>/assets/jquery-fancybox/js/jquery.fancybox-1.3.1.js"></script>
<script>
    var basePath = '<%=basePath %>';
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(['element', 'table', 'form', 'jquery','upload','layer'], function () {
        var element = layui.element,table = layui.table,form = layui.form,
            upload = layui.upload;
        var $ = layui.jquery; save();
        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: basePath+'/imgUpload.do'  //改成您自己的上传接口
            ,multiple: true, field: 'fileUploads'
           ,done: function(res,index, upload){
                var uploadHid = $('#uploadHid').val(),backMe = res.backMessage;
                if(uploadHid != '') uploadHid += ';';
                $('#uploadHid').val(uploadHid + backMe);
            },allDone: function(obj){
                $('#demo2').html('');
                var uploadHid = $('#uploadHid').val(),hidData = uploadHid.split(';');
                for(var j=0;j<hidData.length;j++){
                    var data = hidData[j].split(','); //原文件名,保存文件名,地址
                    $('#demo2').append('<div class="imgDiv" id="div'+data[1]
                        +'"><span id="span'+data[1]+'" class="layui-btn-primary  layui-icon layui-icon-close"></span><a rel="example_group" href="'+basePath + data[2]
                        +'" title="'+data[0]+'"><img alt="'+data[0]+'" src="'
                        +basePath + data[2]+'" class="layui-upload-img" /></a></div>');
                    $('#span' + data[1]).on('click', function () {
                        $('#div' + data[1]).remove();
                        $('#uploadHid').val(initSTR(uploadHid,data[1]));
                    });
                }
                $("a[rel=example_group]").fancybox({ //点击放大查看效果
                    'transitionIn'		: 'none',
                    'transitionOut'		: 'none',
                    'titlePosition' 	: 'over',
                    'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
                        return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                    }
                });
            }
        });
    });
    function save(){
        layui.use(['form'], function () {
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                $.post(basePath + '/saveHouse.do', {
                    params: JSON.stringify(data.field),filePath:$('#uploadHid').val()
                    },function (result) {
                        layer.alert('保存成功！');
                        return false;
                    }, 'json');
                return false;
            });
        });
    }
    function initSTR(a,b){
        var data = a.split(';'),str = '';
        for(var j=0;j<data.length;j++){
            if(data[j].indexOf(b) > -1){}else{
                if(str != '') str += ';';
                str += data[j];
            }
        }
        return str;
    }

</script>
</body>
</html>

放大查看图片代码在我的博客中，希望能够帮助到大家，更多是给自己留个笔记(#^.^#)

1°叁柒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui 上传图片后将返回的数据放到表单中，再保存form表单数据，带有图片放大查看

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="s" uri="/struts-tags"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + re.
复制链接

扫一扫