mediahls/web/templates/video/edit.html.tmpl

{{template "header" .}}
<div class="container-fluid flex justify-content">
    <div class="main">
        <div class="title">
            <h3>上传视频</h3>
            <a href="/me/videos" class="btn btn-primary">返回列表</a>
        </div>
        <div class="col-sm-6 py-md-5 flex flex-column justify-content">
            <form action="/me/videos/update" method="post">
                {{ csrfField }}
                {{if .ID}}
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">ID</span>
                        </div>
                        <input type="text" class="form-control" disabled value="{{.ID}}">
                        <input type="hidden" value="{{.ID}}" name="id">
                    </div>
                </div>
                {{end}}
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">标题</span>
                        </div>
                        <input type="text" name="title" class="form-control" required id="title" value="{{.Title}}"
                            aria-describedby="titleValid">
                    </div>
                    {{if .TitleMsg}}
                    <small id="titleValid" style="color: #f44336;" class="form-text">{{.TitleMsg}}</small>
                    {{end}}
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">图片</span>
                        </div>
                        <input type="file" class="form-control" id="upload_images">
                        <input type="button" class="btn btn-secondary" value="上传" onclick="uploadImage()" />
                        <input type="hidden" id="images" name="images" required value="{{.Images}}"
                            aria-describedby="imagesValid">
                    </div>
                    <div class="image-box" style="margin-top: 8px;">
                        {{if .Images}}
                        <img width="120px" src="{{.Images}}" />
                        {{end}}
                    </div>
                    {{if .ImagesMsg}}
                    <small id="imagesValid" style="color: #f44336;" class="form-text">{{.ImagesMsg}}</small>
                    {{end}}
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">描述</span>
                        </div>
                        <textarea class="form-control" id="description" name="description" required
                            aria-describedby="descriptionValid" rows="3">{{.Description}}</textarea>
                    </div>
                    {{if .DescriptionMsg}}
                    <small id="descriptionValid" style="color: #f44336;" class="form-text">{{.DescriptionMsg}}</small>
                    {{end}}
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">视频</span>
                        </div>
                        <input type="file" class="form-control" id="upload_video">
                        <input type="button" class="btn btn-secondary" value="上传" onclick="uploadVideo()" />
                        <input type="hidden" id="video" name="origin_link" required value="{{.OriginLink}}">
                    </div>
                    <div class="video-box" style="margin-top: 8px;">
                        {{if .OriginLink}}
                        <p>{{.OriginLink}}</p>
                        {{end}}
                    </div>
                    <small id="upload_video_msg" style="color: #f44336;" class="form-text">
                        {{.OriginLinkMsg}}
                    </small>
                </div>
                {{if eq .Status -1 200}}
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">状态</span>
                        </div>
                        <select id="status" class="form-control" name="status">
                            {{if eq .Status 200}}
                            <option value="200" selected>正常</option>
                            {{else}}
                            <option value="200">正常</option>
                            {{end}}
                            {{if eq .Status -1}}
                            <option value="-1" selected>下架</option>
                            {{else}}
                            <option value="-1">下架</option>
                            {{end}}
                        </select>
                    </div>
                </div>
                {{end}}
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>
{{define "js"}}
<script>
    function uploadImage() {
        let csrfToken = $('input[name="csrf_token"]').val()
        var files = $('#upload_images').prop('files');
        var data = new FormData();
        data.append('file', files[0]);

        $.ajax({
            url: '/upload_image',
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-Token": csrfToken
            },
            success: function (res) {
                $('#images').val(res);
                $('.image-box').append('<img width="120px" src="' + res + '" />');
            }
        })
    }
    function uploadVideo() {
        let csrfToken = $('input[name="csrf_token"]').val()
        var files = $('#upload_video').prop('files');
        var data = new FormData();
        data.append('file', files[0]);

        $.ajax({
            url: '/upload_file',
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-Token": csrfToken
            },
            success: function (res) {
                $('#video').val(res);
                $('#upload_video_msg').html('上传成功')
            }
        })
    }
</script>
{{end}}
{{template "footer" .}}