caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>添加视频资料</title>
    <meta name="decorator" content="default"/>
    <style>
        .controls .new-tag {
            display: inline-block;
            width: 78px;
            height: 30px;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            margin: 7px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        .controls .new-tag.active {
            border-color: #e15616;
            color: #e15616;
        }

        #tagInput {
            width: 263px;
            margin: 7px;
            display: inline-block;
            height: 30px;
        }

        .controls .tags-operate .tag-add {
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
        }

        .upload {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 20px;
            cursor: pointer;
            width: 52px;
            height: 20px;
        }

        .upload input {
            position: absolute;
            width: 170px;
            font-size: 20px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .upload:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .add-submit {
            position: relative;
            display: inline;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 20px;
            cursor: pointer;
            width: 52px;
            height: 30px;
        }

        .add-submit input {
            position: absolute;
            width: 50px;
            font-size: 20px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .add-submit:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .upload-loading{
            display: none;
            width: 32px;
            height: 32px;
            margin-left: 10px;
        }
        .upload-loading img{
            width: 16px;
            height: 16px;
            margin: 0 auto 0;
        }

        #file-list-display {
            width: 600px;
            height: auto;
            float: left;
            margin-left: 20px;
        }

        #file-list-display p {
            line-height: 30px;
            font-size: 14px;
            color: #333333;
            margin: 0;
        }

        #file-list-display p .del {
            color: #2fa4e7;
            font-size: 12px;
            cursor: pointer;
            margin-left: 20px;
        }

        .Main-content{
            height: 100px;
        }

        .control-group{
            margin-top: 40px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#searchForm").validate({
                submitHandler: function (form) {
                    var isSubMitFlag = true;
                    var productID = $("#productID").val();
                    if (isNaN(productID) || productID.indexOf('0') == 0 ) {
                        alertx("请输入正确的商品ID");
                        isSubMitFlag = false;
                        return false;
                    }
                    if (isSubMitFlag) {
                        form.submit();
                    }
                }
            })
        });
    </script>
</head>
<body>
<form:form id="inputForm" modelAttribute="cmProductArchiveContent" action="${ctx}/archive/cmOrderArchiveContent/save" method="post" class="form-horizontal">
    <form:hidden path="id"/>
    <form:hidden path="type" value="2"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        <label class="control-label"><font color="red">*</font>标题：</label>
        <div class="controls">
            <form:input path="title" htmlEscape="false" maxlength="50" class="input-xlarge "  style="position:relative"/>
        </div>
        <div style="margin:5px 0 0 180px">
            <font color="red">标题输入不超过50个字</font>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label"><font color="red">*</font>视频路径：</label>
        <input id="uploadFileName" type="text" style="display: inline;margin-left:20px" disabled="true" class="input-xlarge required" />
        <div class="upload">
            <input type="file" name="file" id="archiveFile" accept=".mp4">选择文件
        </div>
        <div class="add-submit">
            <input id="addSubmit" type="button" value="上传" style="cursor: pointer"/>上传&nbsp;
        </div>
        <div class="upload-loading">
            <img alt="gif" src="/static/images/upload.gif" width="32px" border="none">
        </div>
        <div style="margin:5px 0 0 180px">
            <font color="red">视频大小不超过50M</font>
        </div>
    </div>
</form:form>

<script>
    var fileId = '';

    function getCheckedItems() {
        var items = new Array();
        items.push({
            id: $("#id").val(),
            title: $("#title").val(),
            fileId: fileId
        })
        return items;
    }

    $(function () {
        //初始化文件名称
        if (${cmProductArchiveContent.id ne null}) {
            var fileName = '${cmProductArchiveContent.fileList[0].fileName}';
            var id = '${cmProductArchiveContent.fileList[0].id}';
            $("#uploadFileName").val(fileName);
            fileId = id;
        }

        //点击上传按钮后上传文件
        $('#addSubmit').click(function () {
            var filesById = document.getElementById('archiveFile');
            var files = $('#archiveFile');
            var fileList = files.prop('files');
            var fileName = $('#uploadFileName').val();
            if (files === '' || fileList.length == 0 || fileName == '') {
                alertx('请选择上传文件');
                return;
            }
            var data = new FormData();
            data.append('file', fileList[0]);
            data.append('fileName', fileName);
            $('.upload-loading').css("display", "inline");
            $.ajax({
                url: "${ctx}/archive/cmProductArchiveContent/upload",
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (res) {
                    if (res.success) {
                        filesById.value = '';
                        fileId = res.archiveFile.id;
                        $('.upload-loading').hide();
                        $.jBox.tip('上传成功', 'info');
                    } else {
                        $.jBox.tip(res.msg, 'error');
                        $('.upload-loading').hide();
                    }
                },
                error: function (json) {

                }
            });
        });


        var fileList = [];
        var fileIds = '';
        var files = document.getElementById("archiveFile");
        //选择上传文件后显示文件名称
        files.addEventListener("change", function (event) {
            var name = event.target.files[0].name;
            $('#uploadFileName').val(name);
            fileId = '';
        });
    })


</script>
</body>
</html>