|
|
@@ -0,0 +1,439 @@
|
|
|
+<%@ page import="com.caimei.modules.baike.entity.CmBaikeProductFile" %><%--
|
|
|
+ Created by IntelliJ IDEA.
|
|
|
+ User: Administrator
|
|
|
+ Date: 2020/4/9
|
|
|
+ Time: 19:54
|
|
|
+ To change this template use File | Settings | File Templates.
|
|
|
+--%>
|
|
|
+<%@ 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 type="text/css">
|
|
|
+ .table td i {
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconBox {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .controls .conList {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conList .btn:nth-of-type(1) {
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content {
|
|
|
+ margin-top: -70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) {
|
|
|
+ width: 90px;
|
|
|
+ height: 100px;
|
|
|
+ border: 2px solid #eee;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) > div {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) span {
|
|
|
+ font-size: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) h5 {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-upload {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ position: relative;
|
|
|
+ top: -38px;
|
|
|
+ left: -25px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content .conList ol li {
|
|
|
+ width: 114px;
|
|
|
+ min-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 120px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hide-pic {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+ $("#inputForm").validate({
|
|
|
+ submitHandler: function (form) {
|
|
|
+ var beginTime = $("#beginTime").val();
|
|
|
+ var endTime = $("#endTime").val();
|
|
|
+ if (beginTime > endTime) {
|
|
|
+ alertx("开始时间不能晚于结束时间！");
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ loading('正在提交，请稍等...');
|
|
|
+ form.submit();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ errorContainer: "#messageBox",
|
|
|
+ errorPlacement: function (error, element) {
|
|
|
+ $("#messageBox").text("输入有误，请先更正。");
|
|
|
+ if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
|
|
|
+ error.appendTo(element.parent().parent());
|
|
|
+ } else {
|
|
|
+ error.insertAfter(element);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<br/>
|
|
|
+<form:form id="inputForm" modelAttribute="floorImage" action="" method="post" class="form-horizontal">
|
|
|
+ <form:hidden path="id" id="id"/>
|
|
|
+ <sys:message content="${message}"/>
|
|
|
+ <div class="control-group iconBox">
|
|
|
+ <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>视频封面</label>
|
|
|
+ <div class="controls upload-content" id="imageBox">
|
|
|
+ <div class="conList">
|
|
|
+ <form:hidden id="image" path="image" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
|
|
|
+ <sys:ckfinder input="image" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
|
|
|
+ maxHeight="100"/>
|
|
|
+ <br>
|
|
|
+ <label>${pcImageSize}</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<%-- <div class="control-group iconBox">--%>
|
|
|
+<%-- <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>小程序图片：</label>--%>
|
|
|
+<%-- <div class="controls upload-content" id="appletsImageBox">--%>
|
|
|
+<%-- <div class="conList">--%>
|
|
|
+<%-- <form:hidden id="appletsImage" path="appletsImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>--%>
|
|
|
+<%-- <sys:ckfinder input="appletsImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"--%>
|
|
|
+<%-- maxHeight="100"/>--%>
|
|
|
+<%-- <br>--%>
|
|
|
+<%-- <label>${appletsImageSize}</label>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+ <div class="control-group" style="display: ${type eq 'adsImage'?'none':''}">
|
|
|
+ <label class="control-label"><font color="red">*</font>标题：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="name" id="name" htmlEscape="false" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group" style="display: ${type eq 'adsImage'?'none':''}">
|
|
|
+ <label class="control-label"><font color="red">*</font>内容：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:textarea path="content" id="content" htmlEscape="false" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" style="margin-top:10px">视频路径：</label>
|
|
|
+ <div class="controls" style="margin-top:10px">
|
|
|
+<%-- <input id="uploadFileName" type="text" style="display: inline;" placeholder="支持mp4" disabled="true" class="input-xlarge required" />--%>
|
|
|
+ <div class="upload">
|
|
|
+ <input type="file" name="file" id="productFile" accept=".mp4" >
|
|
|
+ </div>
|
|
|
+ <div class="add-submit">
|
|
|
+ <input id="addSubmit" type="button" value="上传"/>
|
|
|
+ </div>
|
|
|
+ <div class="upload-loading">
|
|
|
+ <img alt="gif" src="/static/images/upload.gif" width="32px" border="none">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <div id='file-list-display' style="margin-left:180px">
|
|
|
+<%-- <c:if test="${not empty cmBaikeProduct.videoList}">--%>
|
|
|
+<%-- <c:forEach items="${cmBaikeProduct.videoList}" var="videoFile" varStatus="statusIndex">--%>
|
|
|
+<%-- <p>${videoFile.fileTitle}--%>
|
|
|
+ <span class="del"><a id="bf">预览</a></span> <%-- ${floorImage.id} </c:if>--%>
|
|
|
+
|
|
|
+ <span class="del" onclick="dataDelete(this,'${id}')">删除</span>
|
|
|
+<%-- </p>--%>
|
|
|
+<%-- </c:forEach>--%>
|
|
|
+<%-- </c:if>--%>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<%-- <div class="control-group">--%>
|
|
|
+<%-- <label class="control-label">跳转链接：</label>--%>
|
|
|
+<%-- <div class="controls">--%>
|
|
|
+<%-- <form:input path="link" id="link" htmlEscape="false" cssStyle="position: relative" class="input-xlarge required"/>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- <div class="control-group iconBox">--%>
|
|
|
+<%-- <label class="control-label">小程序内容宣传图：</label>--%>
|
|
|
+<%-- <div class="controls upload-content" id="adsImageBox">--%>
|
|
|
+<%-- <div class="conList">--%>
|
|
|
+<%-- <form:hidden id="adsImage" path="adsImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>--%>
|
|
|
+<%-- <sys:ckfinder input="adsImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"--%>
|
|
|
+<%-- maxHeight="100"/>--%>
|
|
|
+<%-- <br>--%>
|
|
|
+<%-- <label>建议图片尺寸宽度750px</label>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label"><font color="red">*</font> 排序：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="sort" id="sort" htmlEscape="false" maxlength="11" onkeyup="onlynum(this)" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">网站状态：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="pcStatus" id="pcStatus" class="input-medium required">
|
|
|
+ <form:option value="1" label="启动"/>
|
|
|
+ <form:option value="0" label="停用"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">小程序状态：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="appletsStatus" id="appletsStatus" class="input-medium required">
|
|
|
+ <form:option value="1" label="启动"/>
|
|
|
+ <form:option value="0" label="停用"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</form:form>
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+ //弹出框去滚动条
|
|
|
+ top.$('#jbox-content').css("overflow-y", "hidden");
|
|
|
+ show_title(30);
|
|
|
+ });
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ $('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
|
|
|
+ $('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
|
|
|
+ $('.upload-content .conList').find('.cancel-upload').hide();
|
|
|
+ var observeEle = document.getElementsByClassName('upload-content')[0];
|
|
|
+ var observeEle1 = document.getElementsByClassName('upload-content')[1];
|
|
|
+ var observeEle2 = document.getElementsByClassName('upload-content')[2];
|
|
|
+ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
|
|
+ var MutationObserverConfig = {
|
|
|
+ childList: true,
|
|
|
+ subtree: true,
|
|
|
+ characterData: true
|
|
|
+ };
|
|
|
+ var observer = new MutationObserver(function (mutations) {
|
|
|
+ $.each(mutations, function (index, item) {
|
|
|
+ if (item.type === 'childList') {
|
|
|
+ // 在创建新的 element 时调用
|
|
|
+ var target = $(item.target),
|
|
|
+ thisWrapper = target.closest('.conList'),
|
|
|
+ nextEle = thisWrapper.next();
|
|
|
+ thisWrapper.find('li').css('z-index', 99);
|
|
|
+ thisWrapper.find('.cancel-upload').show();
|
|
|
+ if (nextEle.hasClass('hide-pic')) {
|
|
|
+ nextEle.removeClass('hide-pic');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ observer.observe(observeEle, MutationObserverConfig);
|
|
|
+ observer.observe(observeEle1, MutationObserverConfig);
|
|
|
+ observer.observe(observeEle2, MutationObserverConfig);
|
|
|
+
|
|
|
+ $('body').on('click', '.upload-content li', function () {
|
|
|
+ var index = $(this).closest('.conList').index() + 1,
|
|
|
+ str = 'remarkImage' + index + 'FinderOpen';
|
|
|
+ eval(str + '()');
|
|
|
+ });
|
|
|
+ $('body').on('click', '.cancel-upload', function () {
|
|
|
+ var wrapper = $(this).closest('.conList');
|
|
|
+ wrapper.find('li').css('z-index', '-1');
|
|
|
+ wrapper.find('input').val('');
|
|
|
+ $(this).hide();
|
|
|
+ wrapper.removeClass("hide-pic");
|
|
|
+ wrapper.parent().append(wrapper.clone());
|
|
|
+ wrapper.remove();
|
|
|
+ $(".conList").each(function (i, ele) {
|
|
|
+ if ($(ele).find("input.input-xlarge").val()) {
|
|
|
+ $(ele).next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $(window).on("load", function () {
|
|
|
+ setTimeout(function () {
|
|
|
+ $("#imageBox").find("input.input-xlarge").each(function (i, ele) {
|
|
|
+ if ($(ele).val()) {
|
|
|
+ $(ele).next().find("li").css("z-index", "99");
|
|
|
+ $(ele).parents(".conList").find(".cancel-upload").show();
|
|
|
+ $(ele).parents(".conList").next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $("#appletsImageBox").find("input.input-xlarge").each(function (i, ele) {
|
|
|
+ if ($(ele).val()) {
|
|
|
+ $(ele).next().find("li").css("z-index", "99");
|
|
|
+ $(ele).parents(".conList").find(".cancel-upload").show();
|
|
|
+ $(ele).parents(".conList").next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $("#adsImageBox").find("input.input-xlarge").each(function (i, ele) {
|
|
|
+ if ($(ele).val()) {
|
|
|
+ $(ele).next().find("li").css("z-index", "99");
|
|
|
+ $(ele).parents(".conList").find(".cancel-upload").show();
|
|
|
+ $(ele).parents(".conList").next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function getCheckedItems() {
|
|
|
+ var items = {
|
|
|
+ "id": $('#id').val(),
|
|
|
+ "productId": "",
|
|
|
+ "image": $('#image').val(),
|
|
|
+ "appletsImage": $('#appletsImage').val(),
|
|
|
+ "adsImage": $('#adsImage').val(),
|
|
|
+ "name": $('#name').val(),
|
|
|
+ "content": $('#content').val(),
|
|
|
+ "link": $('#link').val(),
|
|
|
+ "sort": $('#sort').val(),
|
|
|
+ "pcStatus": $('#pcStatus').val(),
|
|
|
+ "appletsStatus": $('#appletsStatus').val(),
|
|
|
+ "label": $('#label').val(),
|
|
|
+ "createDate": ""
|
|
|
+ };
|
|
|
+ return items;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @param obj
|
|
|
+ * jquery控制input只能输入数字
|
|
|
+ */
|
|
|
+ function onlynum(obj) {
|
|
|
+ obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
|
|
|
+ }
|
|
|
+
|
|
|
+ //删除文件
|
|
|
+ function dataDelete(that, id) {
|
|
|
+ console.log($(that).text());
|
|
|
+ $(that).parent().remove();
|
|
|
+ var fileIds = $("#fileIds").val();
|
|
|
+ if (fileIds.indexOf(id)) {
|
|
|
+ fileIds = fileIds.replace(id + ',', '');
|
|
|
+ $("#fileIds").val(fileIds);
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url: "${ctx}/baike/cmBaikeProduct/deleteFile",
|
|
|
+ data: {"fileId": id},
|
|
|
+ async: false,
|
|
|
+ type: "POST"
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function previewVideo(url) {
|
|
|
+ var url = "${ctx}/archive/cmProductArchiveContent/preview?url=" + encodeURIComponent(url);
|
|
|
+ var title = "视频播放";
|
|
|
+ top.$.jBox("iframe:" + url, {
|
|
|
+ iframeScrolling: 'yes',
|
|
|
+ width: 1000,
|
|
|
+ height: 750,
|
|
|
+ persistent: true,
|
|
|
+ title: title,
|
|
|
+ buttons: {"关闭": '-1'}
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var fileIds=$('#id').val()
|
|
|
+ //点击上传按钮后上传文件
|
|
|
+ $('#addSubmit').click(function () {
|
|
|
+ // var fileIdArr = fileIds.split(',');
|
|
|
+ // if (fileIdArr.length >= 7) {
|
|
|
+ // alertx('最多上传6个视频');
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ var filesById = document.getElementById('productFile');
|
|
|
+ var files = $('#productFile');
|
|
|
+ var filevalue = document.getElementById('productFile').value;
|
|
|
+
|
|
|
+ var fileList = files.prop('files');
|
|
|
+ var fileTitle = $('#fileTitle').val();
|
|
|
+ var fileName = $('#uploadFileName').val();
|
|
|
+ // if (fileTitle == '') {
|
|
|
+ // alertx('请输入视频标题')
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if (files === '' || files.length == 0 || fileName == '') {
|
|
|
+ // alertx('请选择上传文件');
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ if (filevalue === '') {
|
|
|
+ alertx('请选择上传文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $("#fileTitle").val("");
|
|
|
+ $("#uploadFileName").val("");
|
|
|
+ var data = new FormData();
|
|
|
+ var productId = $("#id").val();
|
|
|
+ data.append('file', fileList[0]);
|
|
|
+ data.append('fileTitle', fileTitle);
|
|
|
+ data.append('fileName', fileName);
|
|
|
+ data.append('productId', productId);
|
|
|
+ data.append('fileIds', fileIds);
|
|
|
+ $('.upload-loading').css("display", "inline");
|
|
|
+ $.ajax({
|
|
|
+ url: "${ctx}/baike/cmBaikeProduct/upload",
|
|
|
+ data: data,
|
|
|
+ type: "POST",
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (res) {
|
|
|
+ if (res.success) {
|
|
|
+ filesById.value = '';
|
|
|
+ var ossUrl=res.productFile.ossUrl;
|
|
|
+ console.log(res);
|
|
|
+ console.log(res.productFile);
|
|
|
+ document.getElementById('bf').setAttribute("onclick", "previewVideo('" + ossUrl + "')");
|
|
|
+ // console.log(ss.ossUrl);
|
|
|
+ // renderFileList(res.productFile);
|
|
|
+ $('.upload-loading').hide();
|
|
|
+ } else {
|
|
|
+ $.jBox.tip(res.msg, 'error');
|
|
|
+ $("#uploadFileName").val(fileName);
|
|
|
+ $('.upload-loading').hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ error: function (json) {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
JiangChongBo