• 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>
    

      

  • 相关阅读:
    java_29打印流
    java_26 缓冲流
    java-27 Properties类的使用
    java_24.1文件流的应用--复制文件
    java_25 FileReader类和FileWriter类
    java_25.1字节转为字符OutputStreamWriter
    java_23 File类
    java_24 FileOutputStream类和FileInputStream类
    java_21 Set接口、HashSet类、LinkedSet类
    随机数Random和静态函数Math
  • 原文地址:https://www.cnblogs.com/ly-03-04/p/12321599.html
Copyright © 2020-2023  润新知