<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
<head>
|
<th:block th:include="include :: header('新增素材')" />
|
</head>
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<form class="form-horizontal m" id="form-material-add" th:object="${material}">
|
<div class="form-group">
|
<label class="col-sm-3 control-label">素材名称：</label>
|
<div class="col-sm-8">
|
<input name="materialName" id="materialName" class="form-control" type="text" required style="width:calc(100% - 100px);float: left; margin-right: 3px;">
|
<button id="uploadBtn" type="button" class="btn btn-sm btn-primary" style="display: inline-block; width: 95px;position: relative;float: left;height: 33px;"><i class="fa fa-check"></i>上 传</button>
|
</div>
|
</div>
|
<div class="form-group" style="margin-top: -15px;">
|
<label class="col-sm-3 control-label">素材类型：</label>
|
<div class="col-sm-8">
|
<input type="hidden" name="materialType">
|
<div class="radio-box" th:each="dict : ${@dict.getType('material_type')}">
|
<input type="radio" th:id="${'materialType_' + dict.dictCode}" th:readonly="readonly" name="materialTypeDisplay" th:value="${dict.dictValue}" >
|
<label th:for="${'materialType_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">素材分组：</label>
|
<div class="col-sm-8">
|
<div class="input-group">
|
<input id="groupId" name="groupId" type="hidden" th:field="*{groupId}" />
|
<input class="form-control" type="text" onclick="selectMaterialGroupTree()" id="groupName" readonly="true" th:field="*{groupName}">
|
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">素材描述：</label>
|
<div class="col-sm-8">
|
<textarea name="description" class="form-control"></textarea>
|
</div>
|
</div>
|
<!--<div class="form-group">
|
<label class="col-sm-3 control-label">启用状态：</label>
|
<div class="col-sm-8">
|
|
<div class="radio-box" th:each="dict : ${@dict.getType('use_state')}">
|
<input type="radio" th:id="${'useState_' + dict.dictCode}" th:readonly="readonly" name="useState" th:value="${dict.dictValue}" th:checked="${dict.default}" >
|
<label th:for="${'useState_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
</div>
|
|
</div>
|
</div>-->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">保存路径：</label>
|
<div class="col-sm-8">
|
<input name="savePath" id="savePath" readonly class="form-control" type="text">
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">素材大小：</label>
|
<div class="col-sm-8">
|
<input name="materialSize" id="materialSize" class="form-control" type="hidden">
|
<input name="materialSizeDisplay" id="materialSizeDisplay" class="form-control" readonly type="text">
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">宽：</label>
|
<div class="col-sm-8">
|
<input name="width" id="width" class="form-control" readonly type="text">
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">高：</label>
|
<div class="col-sm-8">
|
<input name="height" id="height" class="form-control" readonly type="text">
|
</div>
|
</div>
|
</form>
|
</div>
|
<th:block th:include="include :: footer" />
|
|
<script th:src="@{/ajax/libs/plupload/plupload.full.min.js}"></script>
|
<script type="text/javascript">
|
//1图片2 视频3文本4音频5压缩6其它
|
//图片
|
var imageReg = /.+\.(gif|jpg|jpeg|png|webp|bmp)/i;
|
//视频
|
var vedioReg = /.+\.(mpg?4|3gp|wav|wma|wmv)/i;
|
//文本
|
var textReg=/.+\.(txt|pdf|doc|docx|xls|xlsx|ppt|pptx|ini)/i;
|
//视频
|
var audioReg = /.+\.(mp3|mid|wav|wma|avi)/i;
|
//压缩
|
var zipReg = /.+\.(zip|rar|gz|bz2|jar)/i;
|
|
//素材类型
|
//图片
|
var MATERIAL_TYPE_IMAGE="1";
|
//视频
|
var MATERIAL_TYPE_VIDEO="2";
|
//文本
|
var MATERIAL_TYPE_TXT="3";
|
//音频
|
var MATERIAL_TYPE_AUDIO="4";
|
//压缩
|
var MATERIAL_TYPE_ZIP="5";
|
//其它
|
var MATERIAL_TYPE_OTHER="6";
|
function autoSetMaterialType(name){
|
var v=MATERIAL_TYPE_OTHER;
|
if(imageReg.test(name)){
|
v=MATERIAL_TYPE_IMAGE;
|
}else if(vedioReg.test(name)){
|
v=MATERIAL_TYPE_VIDEO;
|
}else if(textReg.test(name)){
|
v=MATERIAL_TYPE_TXT;
|
}else if(audioReg.test(name)){
|
v=MATERIAL_TYPE_AUDIO;
|
}else if(zipReg.test(name)){
|
v=MATERIAL_TYPE_ZIP;
|
}else{
|
v=MATERIAL_TYPE_OTHER;
|
}
|
$("[name='materialType']").val(v);
|
$("[name='materialTypeDisplay'][value='"+v+"']").iCheck('check');
|
}
|
var prefix = ctx + "cms/material"
|
$("#form-material-add").validate({
|
focusCleanup: true
|
});
|
$(function(){
|
|
$("[name='materialTypeDisplay']").iCheck('disable');
|
// alert(prefix);
|
})
|
function submitHandler() {
|
if ($.validate.form()) {
|
$.operate.save(prefix + "/add", $('#form-material-add').serialize());
|
}
|
}
|
var prefixGroup = ctx + "cms/materialGroup";
|
/*素材分组-新增-选择父部门树*/
|
function selectMaterialGroupTree() {
|
var options = {
|
title: '素材分组选择',
|
width: "380",
|
url: prefixGroup + "/selectMaterialGroupTree/" + $("#groupId").val(),
|
callBack: doSubmit
|
};
|
$.modal.openOptions(options);
|
}
|
|
function doSubmit(index, layero){
|
var body = layer.getChildFrame('body', index);
|
$("#groupId").val(body.find('#treeId').val());
|
$("#groupName").val(body.find('#treeName').val());
|
layer.close(index);
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
|
runtimes: 'html5,silverlight,html4,flash',
|
browse_button : 'uploadBtn',
|
url : ctx+"cms/uploadMaterial",
|
flash_swf_url : "/ajax/libs/plupload/Moxie.swf",
|
silverlight_xap_url : "/ajax/libs/plupload/Moxie.xap",
|
filters: {
|
max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
|
mime_types : [{ title : "图片文件", extensions:"jpg,jpeg,gif,png,bmp" },
|
{title: "视频文件", extensions: "mp4,mpeg4,3gp,wav,wma,wmv"},
|
{title: "文本文件", extensions: "txt,pdf,doc,docx,xls,xlsx,ppt,pptx,ini"},
|
{title: "视频文件", extensions: "zip,rar,gz,bz2,jar"},
|
{title: "音频文件", extensions: "mp3,mid,wav,wma,avi"}
|
]
|
}//只允许上传图片文件
|
});
|
//绑定文件添加进队列事件
|
uploader.bind('FilesAdded',function(uploader,files){
|
uploader.start(); //开始上传
|
});
|
uploader.bind('Error',function(up, err){
|
alert(err.message);//上传出错的时候触发
|
});
|
uploader.bind("FileUploaded", function(up, file, res){
|
|
var json=res.response;
|
json=JSON.parse(json);
|
|
if(json.code!=0&&json.code!='0'){
|
$.modal.alertError(json.msg);
|
}
|
uploadCallback(json.data);
|
|
})
|
window.onload = function() {
|
uploader.init(); //初始化
|
};
|
function uploadCallback(json){
|
|
$("#width").val(json.width);
|
$("#height").val(json.height);
|
$("#materialSizeDisplay").val(renderFileSize(json.size));
|
$("#materialSize").val(json.size);
|
$("#materialName").val(json.name);
|
$("#savePath").val(json.path);
|
autoSetMaterialType(json.name);
|
}
|
</script>
|
</body>
|
</html>
|
