|
@@ -155,6 +155,113 @@
|
|
|
.red {
|
|
|
color: red;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
</style>
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function() {
|
|
@@ -337,6 +444,7 @@
|
|
|
</ul><br/>
|
|
|
<form:form id="inputForm" modelAttribute="cmBaikeProduct" action="${ctx}/baike/cmBaikeProduct/save" method="post" class="form-horizontal">
|
|
|
<form:hidden path="id"/>
|
|
|
+ <form:hidden path="fileIds" id="fileIds"/>
|
|
|
<form:hidden path="commodityType"/>
|
|
|
<form:hidden path="emptyNum"/>
|
|
|
<sys:message content="${message}"/>
|
|
@@ -394,6 +502,43 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label keyClass">相关视频(各视频大小不超过50M,最多上传6个)</label>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">标题:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <input id="fileTitle" style="width: 457px" htmlEscape="false" >
|
|
|
+ </div>
|
|
|
+ <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 onclick="previewVideo('${videoFile.ossUrl}')">预览</a></span>
|
|
|
+ <span class="del" onclick="dataDelete(this,'${videoFile.id}')">删除</span>
|
|
|
+ </p>
|
|
|
+ </c:forEach>
|
|
|
+ </c:if>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div style="${cmBaikeProduct.commodityType eq 2?'':'display:none'}" >
|
|
|
<div class="control-group">
|
|
|
<label class="control-label titleClass">正品识别</label>
|
|
@@ -895,6 +1040,101 @@
|
|
|
$('input[name="' + questionInput + '"]').val(questionArray[i]);
|
|
|
$('input[name="' + answerInput + '"]').val(answerArray[i]);
|
|
|
}
|
|
|
+
|
|
|
+ //点击上传按钮后上传文件
|
|
|
+ $('#addSubmit').click(function () {
|
|
|
+ var filesById = document.getElementById('productFile');
|
|
|
+ var files = $('#productFile');
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ $("#uploadFileName").val("");
|
|
|
+ var data = new FormData();
|
|
|
+ var productId = $("#id").val();
|
|
|
+ var fileIds = $("#fileIds").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 = '';
|
|
|
+ renderFileList(res.productFile);
|
|
|
+ $('.upload-loading').hide();
|
|
|
+ } else {
|
|
|
+ $.jBox.tip(res.msg, 'error');
|
|
|
+ $("#uploadFileName").val(fileName);
|
|
|
+ $('.upload-loading').hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ error: function (json) {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ var fileList = [];
|
|
|
+ var fileIds = '';
|
|
|
+ var files = document.getElementById("productFile"), renderFileList;
|
|
|
+ //选择上传文件后显示文件名称
|
|
|
+ files.addEventListener("change", function (event) {
|
|
|
+ var name = event.target.files[0].name;
|
|
|
+ console.log(name)
|
|
|
+ $('#uploadFileName').val(name);
|
|
|
+ });
|
|
|
+ var fileListDisplay = document.getElementById('file-list-display');
|
|
|
+ renderFileList = function (data) {
|
|
|
+ fileIds += data.id + ',';
|
|
|
+ console.log(fileIds);
|
|
|
+ $('#fileIds').val(fileIds);
|
|
|
+ fileList.push({fileTitle: data.fileTitle, id: data.id, ossUrl: data.ossUrl});
|
|
|
+ fileList.forEach(function (file, index) {
|
|
|
+ var fileDisplayEl = document.createElement("p");
|
|
|
+ var deleteFile = document.createElement("span");
|
|
|
+ var viewFile = document.createElement("span");
|
|
|
+ var viewFileUrl = document.createElement("a");
|
|
|
+ //预览链接
|
|
|
+ viewFileUrl.innerHTML = '预览';
|
|
|
+ viewFileUrl.setAttribute("onclick", "previewVideo('" + file.ossUrl + "')");
|
|
|
+ viewFileUrl.setAttribute("target", "_blank");
|
|
|
+ //预览按钮
|
|
|
+ viewFile.className = 'viewFile';
|
|
|
+ console.log(viewFile);
|
|
|
+ viewFile.setAttribute("class","del");
|
|
|
+ viewFile.appendChild(viewFileUrl);
|
|
|
+ //删除按钮
|
|
|
+ deleteFile.innerHTML = '删除';
|
|
|
+ deleteFile.className = 'deleteFile';
|
|
|
+ console.log(deleteFile);
|
|
|
+ deleteFile.setAttribute("class","del");
|
|
|
+ deleteFile.setAttribute("onclick", "dataDelete(this, " + file.id + ")");
|
|
|
+
|
|
|
+ fileDisplayEl.setAttribute("id", file.id);
|
|
|
+ fileDisplayEl.innerHTML = file.fileTitle;
|
|
|
+ fileDisplayEl.appendChild(viewFile);
|
|
|
+ fileDisplayEl.appendChild(deleteFile);
|
|
|
+ fileListDisplay.appendChild(fileDisplayEl);
|
|
|
+ });
|
|
|
+ fileList.splice(0, fileList.length);
|
|
|
+ };
|
|
|
})
|
|
|
|
|
|
//删除参数
|
|
@@ -1024,6 +1264,35 @@
|
|
|
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.replace(id + ",", "");
|
|
|
+ }*/
|
|
|
+ $.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'}
|
|
|
+ });
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|