上传图片,语音,和富文本（webuploader,dropzone, froala） - 陈扬天

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">

<title>Works</title>

.lightBoxGallery img {
margin-right: 10px;
width: 100px;
}
</style>
</head>
<style>
.ui-jqgrid-btable tr.jqgrow td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ui-jqdialog-content .DataTD {
padding: 2px;
border: 0 none;
vertical-align: middle;
}
#filePicker div:nth-child(2){width:100%!important;height:100%!important;}
</style>

<table id="table_list_2">
<tbody>
<tr>
<td colspan="2">
<hr class="" style="margin: 1px" />
</td>
</tr>
<tr id="Act_Buttons">
<td class="navButton"><a id="pData"
class="fm-button btn btn-default" style="display: none;"><span
class="glyphicon glyphicon-step-backward"></span></a><a id="nData"
class="fm-button btn btn-default" style="display: none;"><span
class="glyphicon glyphicon-step-forward"></span></a></td>
<td class="EditButton"><a id="changesubmit"
class="fm-button btn btn-default fm-button-icon-left">提交<span
class="glyphicon glyphicon-save"></span></a><a id="cDataa"
class="fm-button btn btn-default fm-button-icon-left"
onclick="changedialogdismiss()">取消<span
class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
</tbody>
</table>

<div style="width: 100%">
<form name="FormPost" id="changefrom" class="form-horizontal m-t"
onsubmit="return false;" style="display: none;">
<div class="ibox-content">
<div class="form-group">
<label class="col-sm-3 control-label">图片：</label>
<div class="col-sm-8">
<input type="hidden" name="id" id="dataId" />
<input type="hidden" name="oper" id="oper" />
<input type="hidden" name="image" id="imagedata" required="" />
<div id="moduleGallery" class="editableGallery"></div>

</div>

</div>
<div class="form-group">
<label class="col-sm-3 control-label">栏目标题：</label>
<div class="col-sm-8">
<input id="programName" type="input" class="form-control" name="programName" required="" maxlength="30" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">栏目简介：</label>
<div class="col-sm-8">
<textarea id="programIntro" cols="4" rows="10" name="programIntro" class="form-control" required="" aria-required="true" maxlength="200"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">语音：</label>
<div class="col-sm-8 ">
<div class="voicediv">
<audio id="audio" src="" controls="controls" >Your browser does not support the audio element.</audio>
</div>
<input id="voice" type="input" style="display: none;" class="form-control" name="voice" required="" >
<input id="voicetime" type="input" style="display: none;" class="form-control" name="voicetime" required="" >
<div id="dropzonediv"></div>

</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">主持人：</label>
<div class="col-sm-8">
<input id="compere" type="input" class="form-control" name="compere" required="" aria-required="true" maxlength="10" >
</div>
</div>
<div class="form-group IdDis">
<label class="col-sm-3 control-label">评论量：</label>
<div class="col-sm-8">
<input id="commentNumber" type="input" class="form-control" name="commentNumber" disabled="disabled" required="" aria-required="true" digits="true">
</div>
</div>
<div class="form-group IdDis">
<label class="col-sm-3 control-label">浏览量：</label>
<div class="col-sm-8">
<input id="pageView" type="input" class="form-control" name="pageView" required="" disabled="disabled" aria-required="true" digits="true" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">是否置顶：</label>
<div class="col-sm-8">
<div class="radio i-checks">
<label>
<input type="radio" checked="checked" value="1" attri="置顶" name="isTop" class="isTop" > <i></i> 置顶</label>
</div>
<div class="radio i-checks">
<label>
<input type="radio" value="0" name="isTop" attri="未置顶" class="isTop" > <i></i> 未置顶</label>
</div>

</div>
</div>
</div>
</form>
</div>


<div class="social-feed-box" id="commentBox" style="display: none;">
</div>



<div th:replace="onload::onloadJS"></div>

<div th:replace="onload::onloadFresh"></div>
<script src="/static/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="/static/js/plugins/webuploader/js/webuploader.js?v=211111111"></script>
<script type="text/javascript" src="/static/js/lin/fm/upload.js?v=111111111111111"></script>
<script type="text/javascript">
//单选按钮
$(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});

</script>

</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:fragment="onloadHead">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<meta name="keywords" content="爱燕子" />
<meta name="description" content="爱燕子" />
    
<!-- <link rel="shortcut icon" type="image/x-icon"  th:href="@{/static/css/favicon.ico}" /> -->
    <!-- jqgrid-->
    
<link href="/static/js/plugins/fancybox/jquery.fancybox.css"
    rel="stylesheet" />
    
    
<link href="/static/css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet"/>
<!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/> -->


<link href="/static/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet"/>
<link th:href="@{/static/css/jquery-ui.css}" rel="stylesheet"/>
<link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>
<!-- Morris -->
<link href="/static/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Gritter -->
<link href="/static/js/plugins/gritter/jquery.gritter.css" rel="stylesheet" />
<link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
<link href="/static/css/font-awesome.css?v=4.4.01" rel="stylesheet"/>
 <!-- jqgrid-->
<link href="/static/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet"/>

<link href="/static/css/animate.css" rel="stylesheet"/>
<link href="/static/css/style.css?v=4.1.0" rel="stylesheet"/> 
<link rel="stylesheet" type="text/css" th:href="@{/static/css/lin/easyui.css}" />
<link href="/static/css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<link href="/static/css/common.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css"/>   
<link href="/static/css/plugins/dropzone/basic.css" rel="stylesheet">
<link href="/static/css/plugins/dropzone/dropzone.css?v=11" rel="stylesheet">

</head>

  <div th:fragment="froalaCss">
  <link rel="stylesheet" type="text/css" href="/static/js/plugins/webuploader/css/webuploader.css" />
  <link rel="stylesheet" type="text/css" href="/static/js/plugins/webuploader/css/style.css" />
  <link rel="stylesheet" href="/static/froala/css/froala_editor.css"/>
  <link rel="stylesheet" href="/static/froala/css/froala_style.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/code_view.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/draggable.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/colors.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/emoticons.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/image_manager.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/image.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/line_breaker.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/table.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/char_counter.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/video.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/fullscreen.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/file.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/quick_insert.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/help.css"/>
  <link rel="stylesheet" href="/static/froala/css/third_party/spell_checker.css"/>
  <link rel="stylesheet" href="/static/froala/css/plugins/special_characters.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css"/>

</div>

          


<body>

<div th:fragment="onloadJS">
    <!-- 全局js -->
    
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>   
    
    <script src="/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/static/js/plugins/layer/layer.min.js"></script>
    <script th:src="@{/static/js/lin/index.js}"></script>
    <!-- 自定义js -->
    <script src="/static/js/hplus.min.js?v=4.1.0"></script>
    <!--<script type="text/javascript" src="js/contabs.js?v=2"></script>-->
    <script type="text/javascript" src="/static/js/contabs.min.js"></script>
    <!-- 第三方插件 -->
    <script src="/static/js/plugins/pace/pace.min.js"></script>
    <script src="/static/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/static/js/demo/peity-demo.min.js"></script>
    <script src="/static/js/content.min.js"></script>
    <script src="/static/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="/static/js/plugins/gritter/jquery.gritter.min.js"></script>
    <script src="/static/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="/static/js/demo/sparkline-demo.min.js"></script>
      <!-- jqGrid -->
    <script src="/static/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="/static/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>  
    <script src="/static/js/jquery-ui-1.10.4.min.js"></script>
    <script src="/static/js/jquery-ui.custom.min.js"></script>
    <!-- 封装过的Sweet alert js -->
    <script th:src="@{/static/js/lin/dialog.js}"></script>
    <!-- Sweet alert -->
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <!-- Toastr script -->
    <script src="/static/js/plugins/toastr/toastr.min.js"></script>
    <!-- laydate -->
    <script src="/static/js/plugins/layer/laydate/laydate.js"></script>
    
    <script th:src="@{/static/js/plugins/fancybox/jquery.fancybox.js}"></script>
    <script src="/static/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
    
    
    <script src="/static/js/plugins/switchery/switchery.js"></script>
    
   
      <script src="/static/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="/static/js/plugins/validate/messages_zh.min.js"></script>
    <script src="/static/js/demo/form-validate-demo.min.js"></script>
    
    <!--  -->
    
    <script src="/static/js/plugins/dropzone/dropzone.js"></script>
    
    
 <div class="lightBoxGallery">
    <div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>
                        </div>
</div>

<div th:fragment="froalaJS">
    <!-- froala editor js -->
    
    
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>

  <script type="text/javascript" src="/static/froala/js/froala_editor.min.js" ></script>
  <script type="text/javascript" src="/static/froala/js/plugins/align.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/char_counter.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/code_beautifier.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/code_view.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/colors.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/draggable.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/emoticons.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/entities.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/file.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/font_size.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/font_family.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/fullscreen.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/image.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/image_manager.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/line_breaker.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/inline_style.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/link.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/lists.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/paragraph_format.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/paragraph_style.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/quick_insert.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/quote.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/table.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/save.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/url.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/video.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/help.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/print.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/third_party/spell_checker.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/special_characters.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/plugins/word_paste.min.js"></script>
  <script type="text/javascript" src="/static/froala/js/languages/zh_cn.js"></script>
</div>
<div th:fragment="webuploaderjs">
     <!--webuploader  -->
 <script type="text/javascript" src="/static/js/plugins/webuploader/js/webuploader.js"></script>
 <script type="text/javascript" src="/static/js/plugins/webuploader/js/upload.js"></script>
 
</div>
<div th:fragment="onloadFresh">
    
<script type="text/javascript">
var check=function(e){
    
    e=e||window.event; //alert(e.which||e.keyCode);
    if((e.which||e.keyCode)==116){
        if(e.preventDefault){
            e.preventDefault();

            window.location.reload(); 
        } else{
            event.keyCode = 0; 
            e.returnValue=false;
            window.location.reload();  
        }
    }
}

if(document.addEventListener){ 
document.addEventListener("keydown",check,false); 
} else{ 
document.attachEvent("onkeydown",check); 
}
</script> 

    <script>
        $(document).ready(function() {
            $(".fancybox").fancybox({
                openEffect : "none",
                closeEffect : "none"
            })
        });
    </script>
</div>
</body>
</html>

$(function() {
$.jgrid.defaults.styleUI = 'Bootstrap';
buildgrid();
});
function changedialogdismiss(){
$("#changedialog").hide(speed="slow");
}

if(data.code == "200"){
$("#table_list_2").trigger("reloadGrid");
if(param==1){
handle==1?successalert("" , "设置置顶成功"):successalert("" , "取消置顶成功");
}
}else{
errorsalert("" , "操作失败");
}
},
error: function(){
errorsalert("" , "出现错误，请重试");
}
});
}
function deleteById(id) {
deletealert("" , "确定要删除此栏目吗？" , function(){doDelete(id)});
}
function doDelete(id){

var jsondata = {"id" : id,"oper":"del",};
$.ajax({
url: "/fmRadioProgram/operation",
type: "POST",
data: jsondata,
success: function(data , stutas){

if(data.code == "200"){
$("#table_list_2").trigger("reloadGrid");

successalert("" , "删除成功");

}else{
errorsalert("" , "操作失败");
}
},
error: function(){
errorsalert("" , "出现错误，请重试");
}
});
}

wuploader = initWebUploaderUI(a, p,o,u,0,wuploader,urlArray,drawcontent,imagedata);
$(a).hide();
}else{

wuploader = initWebUploaderUI(a, p,o,u,1,wuploader,urlArray,drawcontent,imagedata);
}
$(".IdDis").show();
}else{
$(".IdDis").hide();
$(".voicediv").hide();
wuploader = initWebUploaderUI(a, p,o,u,1,wuploader,urlArray,drawcontent,imagedata);
}

if(data.code == "200"){
$("#table_list_2").trigger("reloadGrid");
if($("#dataId").val()==""){
successalert("" , "新增成功");
}else{
successalert("" , "修改成功");
}

}else{
errorsalert("" , "操作失败");
}
},
error: function(){
errorsalert("" , "出现错误，请重试");
}
});
layer.close(index);

},
cancel: function(){
},
content: $('#changefrom') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

});

}

// Setup buttons
$("#table_list_2").jqGrid('navGrid', '#pager_list_2', {
edit : false,
add : false,
del : false,
search : false
}, {
height : 300,
reloadAfterSubmit : true
});

$(window).bind('resize', function() {
var width = $('.jqGrid_wrapper').width();
$('#table_list_2').setGridWidth(width);
});

}

function showComment(id,page,rows,ClearContent,isOpenLayer){

$(".jiazaigengduo").remove();
if(ClearContent=="1"){

$("#commentBox").html("");
}
layer.load(3, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url: "/fmComment/commentList?page="+page+"&rows="+rows+"&radioId="+id,
type: "GET",
dataType:"json",
success: function(data , stutas){

page++;
var emptyPhoto='/static/js/plugins/webuploader/img/bg.png';
var str = "";
if(data.code == "200"){
for(var i = 0;i<data.data.commentList.list.length;i++){
var _this = data.data.commentList.list[i];
str+=
'<div class="social-avatar">';
if(_this.ayzUser){
if(_this.ayzUser.headphoto!=''&&_this.ayzUser.headphoto!=null){
str+='<a href="javascript:void(0);" class="pull-left">'+
' <img alt="image" src="'+_this.ayzUser.headphoto+'">'+
'</a>';
}else{
str+='<a href="javascript:void(0);" class="pull-left">'+
' <img alt="image" src="'+emptyPhoto+'">'+
'</a>';
}

};
str+='<div class="media-body">';
if(_this.ayzUser){
if(_this.ayzUser.username){
str+=' <a href="javascript:void(0);">'+_this.ayzUser.username+" "+'<span style="color:red;">'+_this.ayzUser.phone+"</span>";
if(_this.ayzUser.certificationTitle){
str+= ' <label class="btn btn-xs btn-warning">'+_this.ayzUser.certificationTitle+'</label>';

}
str+=' </a>';
}

}

str+=' <small class="text-muted">'+_this.createTime+' 来自客户端</small>'+
' </div>'+
'</div>'+
' <div class="ibox-content">';

if(_this.image!=""&&_this.image!=null){
for(var j = 0;j<_this.image.split("|").length;j++){

str+= ' <a class="fancybox" href="'+_this.image.split("|")[j]+'" title="图片">'+
' <img alt="image" height="400px" src="'+_this.image.split("|")[j]+'" />'+
' </a>';
}

}

str+=_this.content+' </div>'+
' </div>'+
' <div class="social-footer">';

for(var k = 0;k<_this.childList.length;k++){
var _child = _this.childList[k];

str+=' <div class="social-comment"><div class="media-body">';
if(_child.ayzUser){
if(_child.ayzUser.headphoto!=""&&_child.ayzUser.headphoto!=null){
str+= '<a href="javascript:void(0);" class="pull-left">'+
' <img alt="image" src="'+_child.ayzUser.headphoto+'">'+
' </a>';
}else{
str+= '<a href="javascript:void(0);" class="pull-left">'+
' <img alt="image" src="'+emptyPhoto+'">'+
' </a>';
}
str+=' <a href="#">'+_child.ayzUser.username;
if(_child.ayzUser.certificationTitle){
str+= ' <label class="btn btn-xs btn-warning">'+_child.ayzUser.certificationTitle+'</label>';

}
str+= ' </a>';
if(_child.isReply==1){
if(_child.ayzBeUser){
if(_child.ayzBeUser.username){
str+='回复 <a href="#">'+_child.ayzBeUser.username;
if(_child.ayzBeUser.certificationTitle){
str+= ' <label class="btn btn-xs btn-warning">'+_child.ayzBeUser.certificationTitle+'</label>';

}
str+= ' </a>';
}else{
str+='回复 <a href="#" style="color:red;" >未知用户</a>';
}
}else{
str+='回复 <a href="#" style="color:red;" >未知用户</a>';
}

}
}

str+= _child.content+
' <br/>'+
' <a href="javascript:void(0);" class="small"><i class="fa fa-thumbs-up"></i> '+_child.praiseNumber+'</a> -'+
' <small class="text-muted">'+_child.createTime+'</small>'+
' </div></div>';
}
str+= '</div></div>';

}

if(str==''){
str+='<div class="social-footer" style="text-align:center;"><a href="#" style="margin:0 auto;" class="btn btn-xs btn-info disabled" >暂无评论</a></div>';

}else{
if(page<data.data.commentList.pages){

str+='<div class="social-footer jiazaigengduo" style="text-align:center;"><a href="#" style="margin:0 auto;" class="btn btn-xs btn-primary" onclick=showComment("'+id+'","'+page+'","'+rows+'","0","0");>加载更多</a></div>';
}else{
str+='<div class="social-footer" style="text-align:center;"><a href="#" style="margin:0 auto;" class="btn btn-xs btn-info disabled" onclick=showComment("'+id+'","'+page+'","'+rows+'","0","0");>没有更多评论了...</a></div>';

}
}
$("#commentBox").append(str);
layer.closeAll('loading');
}else{
errorsalert("" , "操作失败");
layer.closeAll('loading');
}
},
error: function(){
errorsalert("" , "出现错误，请重试");
layer.closeAll('loading');
}
});
if(isOpenLayer=="1"){
layer.open({
type: 1,
shade: true,
title: "查看评论", //不显示标题
skin: 'layui-layer-rim', //加上边框
area: ['1400px', '800px'], //宽高
closeBtn: 1, //不显示关闭按钮
btn: ['确定'],
zIndex:1000, //层优先级
yes: function(index){

layer.close(index);

},
cancel: function(){
},
content: $('#commentBox') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

});
}

}

package com.sm.ayz.springcloud.controller.file;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.sm.ayz.springcloud.bean.CommonResult;
import com.sm.ayz.springcloud.bean.setting.Poster;
import com.sm.ayz.springcloud.common.alivod.vodUpload.UploadVideoDemo;
import com.sm.ayz.springcloud.service.setting.PosterClientService;

import it.sauronsoftware.jave.Encoder;
import it.sauronsoftware.jave.MultimediaInfo;

@Controller
public class FileController {

    @Autowired
    private PosterClientService service;
    // 账号AK信息请填写(必选)
    public static final String accessKeyId = "LTAIawOwQHZrGDYi";
    // 账号AK信息请填写(必选)
    public static final String accessKeySecret = "FjiN6LcS5ABLGJk91lBUi87DUwgLYM";
    /*
     * @Autowired private CommonFileUtil fileUtil;
     */

    @RequestMapping("/goIndex")
    public String goIndex() {
        // logger.info("进入主页面");
        return "/file";
    }

    @RequestMapping("/fileUpload")
    public String fileUpload(@RequestParam("fileName") MultipartFile file) {

        String targetFilePath = "E:/opt/uploads/";

        if (file.isEmpty()) {
            // logger.info("this file is empty");
        }

        String newFileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
        // 获取原来文件名称
        String fileSuffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));

        if (!fileSuffix.equals(".jpg") || !fileSuffix.equals(".png")) {
            // logger.info("文件格式不正确");
        }
        // 拼装新的文件名
        String targetFileName = targetFilePath + newFileName + fileSuffix;
        // 上传文件
        try {
            FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(targetFileName));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "/success";
    }

    // 使用fastdfs进行文件上传
    @RequestMapping("/uploadFileToFast")
    @ResponseBody
    public String uoloadFileToFast(@RequestParam("file") MultipartFile file) throws IOException, InterruptedException {
        UploadVideoDemo u = new UploadVideoDemo();
        String url = u.testUploadImageLocalFile(accessKeyId, accessKeySecret, file);
        return url;
    }

    // 使用fastdfs进行文件上传
    /**
     * 上传海报图片
     * 
     * @param file
     * @return
     * @throws IOException
     * @throws InterruptedException
     * @author ffwwzz
     */
    @RequestMapping("/uploadHaiBao")
    @ResponseBody
    public String uploadHaiBao(@RequestParam("file") MultipartFile file) throws IOException, InterruptedException {
        UploadVideoDemo u = new UploadVideoDemo();
        String url = u.testUploadImageLocalFile(accessKeyId, accessKeySecret, file);
        Poster p = new Poster();
        p.setId(1L);
        p.setImage(url);
        CommonResult r = service.operationPoster(p, "edit");
        System.out.println(r);
        return url;
    }

    // 使用fastdfs进行文件上传
    @RequestMapping("/uploadVideoToFast")
    @ResponseBody
    public Map<String, Object> uploadVideoToFast(@RequestParam("file") MultipartFile file)
            throws IOException, InterruptedException {
        File toFile = null;

        InputStream ins = null;
        ins = file.getInputStream();
        toFile = new File(file.getOriginalFilename());
        inputStreamToFile(ins, toFile);
        ins.close();

        String length = ReadVideoTime(toFile);
        Map<String, Object> url = UploadVideoDemo.testUploadStream(accessKeyId, accessKeySecret, "视频",
                file.getOriginalFilename(), file.getInputStream());
        url.put("length", length);
        return url;
    }

    private String ReadVideoTime(File source) throws InterruptedException {
        Encoder encoder = new Encoder();
        String length = "";
        try {
            MultimediaInfo m = encoder.getInfo(source);
            long ls = m.getDuration() / 1000;
            int hour = (int) (ls / 3600);
            int minute = (int) (ls % 3600) / 60;
            int second = (int) (ls - hour * 3600 - minute * 60);
            length = hour + ":" + minute + ":" + second;
        } catch (Exception e) {
            e.printStackTrace();
        }
        Thread.sleep(1000);
        System.out.println(source.getAbsolutePath());
        System.out.println(source.getPath());
        System.out.println(length);
        System.out.println(source.delete());
        return length;
    }

    public static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 删除单个文件
     *
     * @param fileName 要删除的文件的文件名
     * @return 单个文件删除成功返回true，否则返回false
     */
    public static boolean deleteFile(String fileName) {
        File file = new File(fileName);
        // 如果文件路径所对应的文件存在，并且是一个文件，则直接删除
        if (file.exists() && file.isFile()) {
            if (file.delete()) {
                System.out.println("删除单个文件" + fileName + "成功！");
                return true;
            } else {
                System.out.println("删除单个文件" + fileName + "失败！");
                return false;
            }
        } else {
            System.out.println("删除单个文件失败：" + fileName + "不存在！");
            return false;
        }
    }
}