layui表单与上传图片

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
    <div> 
        <form action="/" method="post" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                
                    <input type="image" name="UImg" id="test2" src="" value="" />
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon"></i>上传图片
                    </button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="UName" required lay-verify="required" placeholder="请输入用户名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="UPwd" required lay-verify="required" placeholder="请输入密码" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="USex" value="男" title="男" checked />
                    <input type="radio" name="USex" value="女" title="女" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="UHobby" value="写作" title="写作" checked />
                    <input type="checkbox" name="UHobby" value="阅读" title="阅读" />
                    <input type="checkbox" name="UHobby" value="发呆" title="发呆" />
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="URemark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="~/layui/layui.all.js"></script>
    
    <script>

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

            var uploadInst = upload.render({
                elem: "#test1",
                url: "https://localhost:44304/api/Upload/Post",
                done: function (res)
                {
                    console.log(res);
                    layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);
                      layui.$("#test2").attr('value','https://localhost:44304'+ res.data.src);
                    alert('上传成功');
                },
                error: function ()
                {

                }
            })
        })



        layui.use('form',function () {
            var form = layui.form;

            form.on('submit(formDemo)', function (data) {

                console.log(data);
         
                $.ajax({
                    url: "https://localhost:44304/api/userinfos/Post",
                    data: data.field,
                    type:"Post",
                    success: function () {
                        alert('成功');
                        location.href = '/UserInfoS/Index';
                    }
                })
                       return false;
               
            }
                )
        })
    </script>
</body>
</html>

  

posted @ 2020-02-17 14:16  噜啦啦0001  阅读(2269)  评论(0编辑  收藏  举报