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

首先是上传图片，使用的百度webuploader 自己修改后可以实例化多个uploader对象：

HTML：

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

<head th:include="onload::onloadHead">


<title>Works</title>
<!-- 自定义js -->

<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
top: 900px !important;
}

.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>

<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?v=111111" />
<link rel="stylesheet" type="text/css" href="/static/js/plugins/layer/skin/layer.css?v=111" />
<link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">

<body class="gray-bg">


<div class="wrapper wrapper-content animated fadeInRight">
<table >

<!--3333333333333333 -->
<table ></span></a></td>
</tr>
</tbody>
</table>

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

 

<!-- 修改弹窗 查看详情 -->


<div style="width: 100%">
<form name="FormPost" ,})});

</script>

<script th:src="@{static/js/lin/fm/fm_radio_program.js?a=111111111}"></script>
<script th:src="@{static/js/plugins/layer/layer.min.js?a=1}"></script>
</body>

</html>

 

onload.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>

 

js:





 




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





function execuesearch(){
	$("#table_list_2").setGridParam( //G,P要大写
		    {
		    url:"/fmRadioProgram/list",
		    postData:{"programName":$("#searchProgramName").val()}
		    }
		).trigger("reloadGrid");
	$("#showsearchparam").hide(speed="slow");
};




function showsearch(){
	$('#showsearchparam').bind('keyup', function(event) {
        if (event.keyCode == "13") {
            //回车执行查询
            $('#execuesearch').trigger("click");
        }
    });
	$("#showsearchparam").show(speed="slow");

}
function updateSetting(id,param,handle){




 var jsondata = {"id" : id,"oper":"edit",};
	if(param==1){
		jsondata.isTop = handle;
	}else{
		return ;
	}
	$.ajax({
		url: "/fmRadioProgram/operation",
		type: "POST",
		data: jsondata,
		success: function(data , stutas){




 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("" , "出现错误，请重试");
		}
	});
}




function initdropzone(){
	var str =' <div ));




 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);
	}




 var title = "修改";
	if(id==""){
		title="新增";
	}
	layer.open({
		  type: 1,
		  shade: true,
		  title: title, //不显示标题
		  skin: 'layui-layer-rim', //加上边框
		  area: ['1400px', '800px'], //宽高
		  closeBtn: 1, //不显示关闭按钮
		  btn: ['保存', '取消'],
		  zIndex:1000, //层优先级
		  yes: function(index){
			  if($("#dataId").val()==""){
				  $("#oper").val("add");
			  }else{
				  $("#oper").val("edit");
			  }

			  if(!$("#changefrom").valid()){
				return;  
			  }
			  if($("#imagedata").val()==""){
				  errorsalert("","请选择一张封面图");
				  return ;
			  }
			  if($("#voice").val()==""){
				  errorsalert("","请上传语音");
				  return ;
			  }
			  $.ajax({
					url: "/fmRadioProgram/operation",
					type: "POST",
					data: $("#changefrom").serialize(),
					dataType:"json",
					success: function(data , stutas){




 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最外层，否则可能被其它的相对元素所影响

		});




}




function buildgrid() {
	$("#table_list_2").jqGrid(
		{
			url : "/fmRadioProgram/list",
			datatype : "json",
			mtype : "POST",
			height : "100%",
			autowidth : true,
			rownumbers : true,
			jsonReader : {
				root : "data.list",
				page : "data.pageNum",
				total : "data.pages", //   很重要 定义了 后台分页参数的名字。
				records : "data.total"
			},
			rowNum : 5,
			 ondblClickRow:function(rowid,iRow,iCol,e){
				changedialogshow(rowid);
			},
			rowList : [ 5,10, 20, 30 ],
			colNames : [ 'id',
						 '栏目标题',
						 '栏目简介',
						 '主持人',
						 '图片',
						 '语音',
						 '评论数量',
						 '浏览量',
						 '是否置顶',
						 '创建时间',
						 '操作' ],
			colModel : [
				{
					name : 'ID',
					index : 'ID',
					editable : true,
					hidden : true,
				},
								{
					name : 'programName',
					index : 'program_name',
					editable : true,
				},
								{
					name : 'programIntro',
					index : 'program_intro',
					editable : true,
					width:300,
				},
								{
					name : 'compere',
					index : 'compere',
					editable : true,
				},
								{
					name : 'image',
					index : 'image',
					editable : true,
				},
								{
					name : 'voice',
					index : 'voice',
					editable : true,
					hidden:true,
				},
								{
					name : 'commentNumber',
					index : 'comment_number',
					editable : true,
				},
								{
					name : 'pageView',
					index : 'page_view',
					editable : true,
				},
								{
					name : 'isTop',
					index : 'is_top',
					editable : true,
				},
								{
					name : 'createTime',
					index : 'create_time',
					editable : true,
					width:200,
				},
				{
					name : 'handle',
					index : 'handle',
					width : 470,
					sortable : false
				}
							],
			pager : "#pager_list_2",
			viewrecords : true,
			editurl : "/fmRadioProgram/operation",
			hidegrid : false,
			gridComplete : function() {
				var ids = $("#table_list_2").jqGrid("getDataIDs");
				var bodys = $("#table_list_2").jqGrid("getRowData");
				for (var int = 0; int < ids.length; int++) {

					var id = ids[int];
					var ck = "<a href='#' class='btn btn-xs btn-primary' onclick='showComment(" + bodys[int].ID + ","+1+","+10+","+1+","+1+")'>查看评论</a>"; //这里的onclick就是调用了上面的javascript函数 Modify(id)
					var edit = "<a href='#' class='btn btn-xs btn-primary' onclick='changedialogshow(" + id + ")'>编辑</a>"; //这里的onclick就是调用了上面的javascript函数 Modify(id)
					var del = "<a href='#' class='btn btn-xs btn-warning' onclick='deleteById(" + id + ")'>删除</a>"; //这里的onclick就是调用了上面的javascript函数 Modify(id)

					var tj=  bodys[int].isTop== 0 ? "<a href='#'  class='btn btn-xs btn-primary' onclick='updateSetting(" + bodys[int].ID + ","+1+","+1+")' >设为置顶</a>" : "<a href='#'  class='btn btn-xs btn-danger' onclick='updateSetting(" + bodys[int].ID + ","+1+","+0+")' >取消置顶</a>";

					var result = $("#table_list_2").jqGrid("setRowData", id, {
						handle : ck + "  "+edit+"  "+tj+"  "+del
					});
					var image = "";
					var title;
					if(bodys[int].image==""){
						 image = "/static/js/plugins/webuploader/img/bg.png";
						 title = "404";
						}else{

							title = "图片";
							image = bodys[int].image;
						}
					var result1 = $("#table_list_2").jqGrid("setRowData", id, {

							image : '<a href="'+image+'" 
					});

				}


			}
		});




 




 // 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最外层，否则可能被其它的相对元素所影响

				});
	  }




 
}


 




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


 


controller:




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;
        }
    }
}




都是异步单张上传


 

 
                    
            
                

                  
 
        

	 
        

            

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode