addfactory layer上传图片

最新推荐文章于 2024-05-25 22:39:08 发布

w983798109

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量397

点赞数

本文链接：https://blog.csdn.net/w983798109/article/details/78136210

版权

<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">

</head>

<body style="background-color:#fff">

<div class="wrapper wrapper-content">
    <div class="main">
        <div class="main-inner">

            <div class="block-flat">
                <div class="header">
                    <h3 style="margin-left: 43%">添加养殖场</h3>
                    <input name="id" id="id" type="hidden"/>
                </div>
                <div class="content">
                    <form class="form-horizontal group-border-dashed" action="#"
                          style="border-radius: 0px;">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">养殖场名称</label>
                            <div class="col-sm-6">
                                <input type="text" id="factoryname" placeholder="养殖场名称" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">养殖种类</label>
                            <div class="col-sm-6" style="width: 150px">
                                <select class="select2" name="factorybreedType"
                                        id="factorybreedType">
                                    <option value="0">请选择...</option>
                                    <option value="1">猪</option>
                                    <option value="2">牛</option>
                                    <option value="3">羊</option>
                                    <option value="4">家禽</option>
                                    <option value="5">兔子</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所在乡/镇</label>
                            <div class="col-sm-6" style="width: 150px">
                                <select class="select2" name="areaname" id="areaname">
                                    <option value="0">请选择...</option>
                                    <option th:each="area:${areaList}" th:text="${area.areaName}"
                                            th:value="${area.areaName}"></option>

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">存栏数</label>
                            <div class="col-sm-6">
                                <input type="text" id="stock" placeholder="存栏数" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">养殖场详细地址</label>
                            <div class="col-sm-6">
                                <input type="text" id="factorydetail" placeholder="养殖场详细地址" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">规模</label>
                            <div class="col-sm-6" style="width: 150px">
                                <select class="select2" name="scale"
                                        id="scale">
                                    <option value="0">请选择...</option>
                                    <option value="1">小</option>
                                    <option value="2">中</option>
                                    <option value="3">大</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">厂区负责人姓名</label>
                            <div class="col-sm-6">
                                <input type="text" id="username" placeholder="厂区负责人姓名" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">经度</label>
                            <div class="col-sm-6">
                                <input type="text" id="longitude" placeholder="经度" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">纬度</label>
                            <div class="col-sm-6">
                                <input type="text" id="latitude" placeholder="纬度" class="form-control">
                            </div>
                        </div>

                        <div style="text-align: center" class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" style="width:100px;height:100px;" id="pic1">
                                <p id="demoText"></p>
                                
                                <input id="pic" name="pic" type="hidden"/>
                            </div>
                                <button type="button" class="btn btn-primary" id="test1">
                                    <i class="layui-icon"></i>上传图片
                                </button>
                        </div>

                        <div class="form-actions">
                            <button style="margin-left:40%" type="button" class="btn btn-primary"
                                    οnclick="saveFactory()">
                                保存
                            </button>
                                
                            <button class="btn" οnclick="repic()" type="reset">重写</button>
                                
                            <button style="margin-left:5%" class="btn" type="button" οnclick="history.back()">返回
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>

</div>
</body>
</html>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>

<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>

<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>

<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>

<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script src="//webapi.amap.com/maps?v=1.3&key=f17fce96ab2598a7b727b73c426498d8"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script src="//cdn.bootcss.com/bootstrap-treeview/1.1.0/bootstrap-treeview.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script>
    function repic() {
        $("#test1").src = "";
    }
    function saveFactory() {
        var id = $("#id").val();
        var factoryname = $("#factoryname").val();
        var factorybreedType = $("#factorybreedType").val();
        var factorydetail = $("#factorydetail").val();
        var username = $("#username").val();
        var areaname = $("#areaname").val();
        var pic=$("#pic").val();
        var longitude = $("#longitude").val();
        var latitude = $("#latitude").val();
        var scale = $("#scale").val();
        var stock = $("#stock").val();
        if (factoryname == "") {
            layer.alert('请输入养殖场名称');
            return false;
        }

        if (factorybreedType == "0") {
            layer.alert('请选择养殖场分类');
            return false;
        }
        if (areaname == "0") {
            layer.alert('请选择乡/镇');
            return false;
        }
        if (factorydetail == "") {
            layer.alert('请输入养殖场地址');
            return false;
        }
        if (username == "") {
            layer.alert('请输入负责人姓名');
            return false;
        }
        if (areaname == 0) {
            layer.alert('请选择所在乡/镇');
            return false;
        }
        if (latitude == "") {
            layer.alert('请输入经度');
            return false;
        }
        if (longitude == "") {
            layer.alert('请输入纬度');
            return false;
        }
        if (scale == 0) {
            layer.alert('请选择规模');
            return false;
        }
        if (stock == 0) {
            layer.alert('请输入存栏数');
            return false;
        }
        var postData = {
            id: id,
            factoryname: factoryname,
            factorybreedType: factorybreedType,
            factorydetail: factorydetail,
            username: username,
            areaname: areaname,
            pic: pic,
            latitude: latitude,
            longitude: longitude,
            scale: scale,
            stock: stock

        };
        $.ajax({
            type: "POST",
            url: "/main/doAddFactory",
            data: postData,
            dataType: "json",
            success: function (data) {
                if (data) {
                    layer.open({
                        content: '添加完成，请返回'

                        , yes: function (index, layero) {
                            location.href = '/main/factorylist';
                        }

                        , cancel: function () {
                            return false;// 开启该代码可禁止点击该按钮关闭
                        }
                    });
                }
                else {
                    layer.alert('添加失败,用户或工厂信息错误，请重试！');
                }
            }
        });
    }

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/api/upload/image'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#pic1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                if(res.success){
//                    $('#pic').attr('src', res.result);
                    $("#pic").val(res.result);
                    return layer.msg('上传成功');
                }
            }
        })
    });

</script>

    上传接口

    @PostMapping(value = "/api/upload/image")
    public Response<String> uploadImage(@RequestBody MultipartFile file) {
        try {
            String imageExt = getExtName(file);
            checkImageExt(imageExt);
            String path = generateSavePath(imageExt, IMAGE);
            path = aliyunFileServer.write(path, file);
            return Response.ok(aliyunToken.getBaseUrl() + "/" + path);
        } catch (Exception e) {
            log.error("upload image failed", e.getMessage());
            throw new OPServerException("upload image failed");
        }
    }