mitao
2024-07-08 022a7ff7abf82cd2546e18071ade5228b4e2339f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@/*
头像参数的说明:
name : 名称
id : 头像的id
@*/
<div class="form-group" id="${id}_container">
    <style type="text/css">.avatar-btn-hide { opacity: 0 } .video,video { width: 150px!important; height: 150px!important; border: 1px solid whitesmoke; }</style>
    <label class="col-sm-3 control-label head-scu-label">
        @if(isNotEmpty(required)){
        <span style="color: red;">*</span>
        @}
        ${name}</label>
    <div class="col-sm-9">
        <div class="col-sm-12">
            <div class="col-sm-4">
                <div id="${id}PreId" class="video" align="center" style="line-height: 150px; text-align: center">
                    <video controls></video>
                    <span class="video">暂无视频</span>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="head-scu-btn upload-btn" id="${id}BtnId">
                    <i class="fa fa-upload"></i>&nbsp;<span>上传</span>
                </div>
            </div>
            @if( isNotEmpty( placeholder)) {
            <div class="col-sm-6" style="color: red; ">
                <div class="head-scu-btn">${placeholder!}</div>
            </div>
            @}
        </div>
        <div class="col-sm-12">
            <div class="progress progress-striped" style="margin-top: 20px;">
                <div id="${id}progressBar" style="width: 0%" aria-valuemax="100"
                     aria-valuemin="0" aria-valuenow="0" role="progressbar"
                     class="progress-bar progress-bar-info"></div>
            </div>
            <input style="opacity:0" id="${id}" value="${value!}" name="${id}"/>
        </div>
        <script>$(function () {
            // 初始化图片上传
            var imageUp = new $WebUploadImage("${id}");
            imageUp.create = function () {
                var webUploader = WebUploader.create({
                    auto : true,
                    pick : {
                        id : '#' + this.uploadBtnId,
                        multiple : false,// 只上传一个
                    },
                    accept : {
                        title : 'Video',
                        extensions : 'mp4,avi',
                        mimeTypes : 'video/mp4,video/MP4,video/AVI,video/avi'
                    },
                    swf : Feng.ctxPath
                        + '/static/js/plugins/webuploader/Uploader.swf',
                    disableGlobalDnd : true,
                    duplicate : true,
                    server : this.uploadUrl,
                    fileSingleSizeLimit : this.fileSizeLimit
                });
                return webUploader;
            }
            imageUp.setUploadBarId("${id}progressBar");
            var bindedObj = imageUp.init();
            bindedObj.off("fileQueued").on('uploadSuccess', function(file,response) {
                Feng.success("上传成功");
                $( "video").show();
                $("span.video").hide();
                $("#" + imageUp.pictureId).val(response);
                if(response.indexOf("http") == -1) { response = Feng.ctxPath + '/kaptcha/' + response; }
                $( "#${id}PreId").find( "video").remove();
                $( "#${id}PreId").append( $( "<video controls>").append('<source src="'+ response +'" type="video/mp4">'));
            });
 
 
            if ( "${value!}") {
                $("span.video").hide();
                $("#${id}PreId").find("video").append('<source src="${value!}" type="video/mp4">');
                $("#${id}BtnId").find( "span").text("更改");
            } else {
                $( "video").hide();
                $("span.video").show();
            }
 
            $("#${id}").on( "valueChange", function (){
                $("#${id}BtnId").find( "span").text("更改");
            });
 
        })</script>
    </div>
</div>
@if(isNotEmpty(underline) && underline == 'true'){
<div class="hr-line-dashed"></div>
@}