1.3.2美博会优化新加模板30-33视频上传功能

src/main/java/com/caimei/modules/newhome/web/NewPageFloorController.java

@@ -283,7 +283,7 @@ public class NewPageFloorController extends BaseController {
      * 活动专题添加图片
      */
     @RequestMapping("/addActivityImage")
-    public String addActivityImage(Product product, String type, Integer templateType, NewPageFloorImage newPageFloorImage, Model model, HttpServletRequest request, HttpServletResponse response) {
+    public String addActivityImage(Product product, String type, Integer templateType,String pageId, NewPageFloorImage newPageFloorImage, Model model, HttpServletRequest request, HttpServletResponse response) {
         if ("productImage".equals(type)) {
             product.setValidFlag("2");
             Page<Product> page = productService.findProductImage(new Page<Product>(request, response), product);
@@ -367,6 +367,7 @@ public class NewPageFloorController extends BaseController {
             model.addAttribute("appletsImageSize", appletsImageSize);
             model.addAttribute("type", type);
             model.addAttribute("floorImage", newPageFloorImage);
+            model.addAttribute("pageId",pageId);
             if(templateType>29&&templateType<=33){
                 return "modules/newhome/addActivityAdsVideo";
             }

src/main/webapp/WEB-INF/views/modules/newhome/addActivityAdsVideo.jsp

@@ -81,6 +81,79 @@
         .hide-pic {
             display: none !important;
         }
+        .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;
+        }
+         .aaa {
+            color: #2fa4e7;
+            font-size: 12px;
+            cursor: pointer;
+            margin-left: 20px;
+        }
+
     </style>
 
     <script type="text/javascript">
@@ -125,6 +198,8 @@
                 <br>
                 <label>${pcImageSize}</label>
             </div>
+            <div hidden><input id="proId" value=${pageId}></div>
+
         </div>
     </div>
 <%--    <div class="control-group iconBox">--%>
@@ -153,28 +228,30 @@
     </div>
     <div class="control-group">
         <div class="control-group">
-            <label class="control-label" style="margin-top:10px">视频路径：</label>
+            <label class="control-label" style="margin-top:10px"><font color="red">*</font>视频路径：</label>
             <div class="controls" style="margin-top:10px">
-<%--                <input id="uploadFileName" type="text" style="display: inline;" placeholder="支持mp4" disabled="true" class="input-xlarge required" />--%>
+                <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" >
+                    <input type="file" name="file" id="productFile" accept=".mp4" >选择文件
                 </div>
                 <div class="add-submit">
-                    <input id="addSubmit" type="button" value="上传"/>
+                    <input id="addSubmit" type="button" value="上传"/>上传
                 </div>
-                <div class="upload-loading">
+                <div class="upload-loading" hidden>
                     <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">
+            <div id='file-list-display' style="margin-left:180px" hidden>
 <%--                <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>--%>
+                                <input type="text" id="videoName" disabled>
+                             <div hidden> <input type="text" id="link" disabled/></div>
+                            <span class="aaa"><a id="bf">预览</a></span> <%--      ${floorImage.id}          </c:if>--%>
 
-                            <span class="del" onclick="dataDelete(this,'${id}')">删除</span>
+                            <span class="aaa" id="sc">删除</span>
 <%--                        </p>--%>
 <%--                    </c:forEach>--%>
 <%--                </c:if>--%>
@@ -342,10 +419,10 @@
         console.log($(that).text());
         $(that).parent().remove();
         var fileIds = $("#fileIds").val();
-        if (fileIds.indexOf(id)) {
-            fileIds = fileIds.replace(id + ',', '');
-            $("#fileIds").val(fileIds);
-        }
+        // if (fileIds.indexOf(id)) {
+        //     fileIds = fileIds.replace(id + ',', '');
+        //     $("#fileIds").val(fileIds);
+        // }
         $.ajax({
             url: "${ctx}/baike/cmBaikeProduct/deleteFile",
             data: {"fileId": id},
@@ -381,7 +458,9 @@
 
         var fileList = files.prop('files');
         var fileTitle = $('#fileTitle').val();
+        // var fileName = $('#addSubmit').val();
         var fileName = $('#uploadFileName').val();
+
         // if (fileTitle == '') {
         //     alertx('请输入视频标题')
         //     return;
@@ -397,7 +476,7 @@
         $("#fileTitle").val("");
         $("#uploadFileName").val("");
         var data = new FormData();
-        var productId = $("#id").val();
+        var productId = $("#proId").val();
         data.append('file', fileList[0]);
         data.append('fileTitle', fileTitle);
         data.append('fileName', fileName);
@@ -415,12 +494,18 @@
                 if (res.success) {
                     filesById.value = '';
                      var ossUrl=res.productFile.ossUrl;
+                    var fileid=res.productFile.id;
+                    var videoname=res.productFile.fileName;
                     console.log(res);
                     console.log(res.productFile);
                     document.getElementById('bf').setAttribute("onclick", "previewVideo('" + ossUrl + "')");
+                    document.getElementById('sc').setAttribute("onclick", "dataDelete(this,'"+fileid+"')");
                     // console.log(ss.ossUrl);
                     // renderFileList(res.productFile);
+                    document.getElementById('videoName').setAttribute("value",videoname);
+                    document.getElementById('link').setAttribute("value",ossUrl);
                     $('.upload-loading').hide();
+                    $('#file-list-display').show();
                 } else {
                     $.jBox.tip(res.msg, 'error');
                     $("#uploadFileName").val(fileName);
@@ -433,7 +518,13 @@
             }
         });
     })
-
+    var files = document.getElementById("productFile");
+    //选择上传文件后显示文件名称
+    files.addEventListener("change", function (event) {
+        var name = event.target.files[0].name;
+        console.log(name)
+        $('#uploadFileName').val(name);
+    });
 </script>
 </body>
 </html>

src/main/webapp/WEB-INF/views/modules/newhome/beautyFloorContentForm.jsp

@@ -1645,9 +1645,10 @@
         var width = $(top.document).width() - 800;
         var height = $(top.document).height() - 160;
         var type = $("#type").val();
+        var pageId= $("#pageId").val();
         var templateType = $("input[name='templateType']:checked").val();
         if (type == 'adsImage') {
-            url = url + "?type=adsImage&templateType=" + templateType;
+            url = url + "?pageId="+pageId+"&type=adsImage&templateType=" + templateType;
         } else if (type == 'infoImage') {
             url = url + "?type=infoImage&templateType=" + templateType;
         } else {