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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM