上传图片,语音,和富文本（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 id="TblGrid_table_list_2" class="EditTable ui-common-table">

						<tbody>

							<tr class="FormData">

								<td class=""><label for="programName" class="search-title">电台栏目：</label></td>

								<td class="">

									<div class="col-sm-12">

										<input id="searchProgramName" name="programName" class="form-control search-input"

											 placeholder="请输入电台栏目名称" type="text" />

	<button id="searchbtn" onclick="execuesearch()" type="button"

						 class="btn btn-w-m btn-success">搜索</button>

											 <button id="searchbtn" onclick="changedialogshow('');" type="button"

						 class="btn btn-w-m btn-primary">新增</button>

									</div>

								</td>

							</tr>

						</tbody>

					</table>

		<div class="row">

			<div class="col-sm-12">

				<div class="jqGrid_wrapper">

					<!--3333333333333333  -->

					<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 id="pager_list_2"></div>

				</div>

			</div>

		</div>

	</div>

 

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

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

		</div>

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

	<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)==){

        if(e.preventDefault){

            e.preventDefault();

            window.location.reload();

        } else{

            event.keyCode = ;

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

}
function updateSetting(id,param,handle){

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 id="dropzone" class="dropzone" >'+
'<button type="submit" class="btn btn-primary pull-right" style="display:none;">提交</button>'+

' </div>';
$("#dropzonediv").html(str);
$("#dropzone").dropzone({
url: "/uploadVideoToFast",//上传文件的地址，
autoProcessQueue:false,
maxFiles: 1,//最多上传几个图片
maxFilesize: 10,//图片的大小，单位是M
addRemoveLinks:true,//是否有删除图片的功能
dictRemoveFile:"移除",//删除图片的文字
dictMaxFilesExceeded: "您最多只能上传1个文件！",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.mp3。",
dictFallbackMessage:"浏览器不受支持",
dictDefaultMessage: "拖入需要上传的文件",
dictFileTooBig:"文件过大上传文件最大支持(10M).",
acceptedFiles: ".mp3",//支持的格式
paramName:'file',//上传的FILE名称，即服务端可以通过此来获取上传的图片，如$_FILES['dropimage']
init: function() {//初始化是的事件
var myDropzone = this;
this.element.querySelector("button[type=submit]")
.addEventListener("click", function(e) {
layer.load(3, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("success", function(file,response) {
$("#voice").val(response.playUrl);
$("#voicetime").val(response.length);
layer.closeAll('loading');
successalert("","上传成功");
$("#audio").attr("src",response.playUrl);
$(".voicediv").show();
});

this.on("addedfile", function(file) {
$("button[type=submit]").show();

});

this.on("removedfile", function(file) {
$("#voice").val("");
$("#voicetime").val("");
$("button[type=submit]").hide();
$(".voicediv").hide();
});
}
});
}
function changedialogshow(id){
initdropzone();
var wuploader;
var urlArray = [];//全局url变量
var a = '#uploader';
var p ='#filePicker';
var o = '#filePicker2';
var u = 'uploadFileToFast';
var drawcontent = '#moduleGallery';
var imagedata = "#imagedata";

// 初始化上传插件
$("#uploader").show();
$("#dataId").val("");
$('#moduleGallery').html("");
urlArray.splice(0,urlArray.length);
$("#pageView").val("");
$("#commentNumber").val("");
$("#voice").val("");
$("#imagedata").val("");
$("#compere").val("");
$("#programIntro").val("");
$("#programName").val("");
if(id!=""){
var datas = $("#table_list_2").jqGrid("getRowData",id);
$("#dataId").val(datas.ID);
$('.isTop').each(function (index, ele) {
if( $(ele).attr("attri")==datas.isTop){
$(ele).attr("checked","checked");
}

});
$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})
$("#pageView").val(datas.pageView);
$("#commentNumber").val(datas.commentNumber);
$("#voice").val(datas.voice);
$("#voicetime").val(datas.voicetime);

if(datas.voice!=""){
$("#audio").attr("src",datas.voice);
$(".voicediv").show();
}else{
$(".voicediv").hide();
}
$("#imagedata").val($("#"+id+"image").attr("href"));
$("#compere").val(datas.compere);
$("#programIntro").val(datas.programIntro);
$("#programName").val(datas.programName);
$('#moduleGallery').html("");
// 现有图片
if($("#"+id+"image").attr("href").indexOf("bg.png")==-1){ //有图片不能上传
urlArray.push($("#"+id+"image").attr("href"));

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

});

}

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+'" id="'+id+'image" title="'+title+'" data-gallery="" ><img src="'+image+'" width="100" height="100" ></img></a>'

});
var result3 = $("#table_list_2").jqGrid("setRowData", id, {
"isTop" : bodys[int].isTop==1?"置顶":"未置顶"
});

}

}
});

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

});
}

}

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() / ;

            int hour = (int) (ls / );

            int minute = (int) (ls % ) / ;

            int second = (int) (ls - hour *  - minute * );

            length = hour + ":" + minute + ":" + second;

        } catch (Exception e) {

            e.printStackTrace();

        }

        Thread.sleep();

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

            byte[] buffer = new byte[];

            while ((bytesRead = ins.read(buffer, , )) != -) {

                os.write(buffer, , 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;

        }

    }

}

都是异步单张上传

上传图片,语音,和富文本（webuploader,dropzone, froala）的更多相关文章

C#语音朗读文本 — TTS的实现
TTS, Text To Speech的缩写,是使用语音朗读文本的技术.目前,在国内应用较多的是排队叫号系统 Windows 平台的TTS,通常使用的是微软自带的 Speech API. Window ...
AWS机器学习初探（2）：文本翻译Translate、文本转语音Polly、语音转文本Transcribe
AWS机器学习初探(1):Comprehend - 自然语言处理服务这几个服务的功能和使用都很直接和简单,因此放在一篇文章中介绍. 1. 文本翻译服务 Translate 1.1 功能介绍 AWS ...
移动端h5实现拍照上传图片并预览&webuploader
.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html ...
django 高级扩展-中间件-上传图片-分页-富文本-celery
""" django 高级扩展一.静态文件 1.css,js,json,图片,字体等 2.配置setting,在最底下设置静态文件目录,写入下面代码 #配置静态文件目录 ...
文本转语音TTS(文本阅读和视频配音制作)MP3
DL-TTS 通过AI驱动引擎可将文本转化为逼真的语音,它可以:(1)生成逼真的合成语音实现与人声的语调和情感匹配的流畅.发音自然的文本转语音.(2)细化的文本转语音控制支持多种语言,并可调整语速.语 ...
itchat个人练习语音与文本图灵测试例程
背景介绍 itchat是一个开源的微信个人号接口,使用python调用微信从未如此简单. 使用不到三十行的代码,你就可以完成一个能够处理所有信息的微信机器人. 官方文档参考https://itchat ...
Django之choices选项和富文本编辑器的使用
项目准备 1.创建数据库 create database choices_test default charset utf8; 2.创建一个名为 choices_test 的Django项目: 3.创 ...
DelphiXE10.2怎么安装文本转语音(TTS)语音转文本(SR)控件（XE10.2+WIN764）
关资料: http://edn.embarcadero.com/article/29583 http://blog.sina.com.cn/s/blog_53866d7501017r1o.html 问 ...
问题-DelphiXE10.2怎么安装文本转语音(TTS)语音转文本(SR)控件（XE10.2+WIN764）
相关资料: http://edn.embarcadero.com/article/29583 http://blog.sina.com.cn/s/blog_53866d7501017r1o.html ...

随机推荐

Android之外部存储(SD卡)
*手机的外部存储空间,这个我们可以理解成电脑的外接移动硬盘,U盘也行.所有的Android设备都有两个文件存储区域:“内部”和“外部”存储器.这两个名称来自早期的Android,当时大多数设备都提供内 ...
Module ngx_http_rewrite_module
http://nginx.org/en/docs/http/ngx_http_rewrite_module.html Directives break if return ...
解决Ubuntu MySQL服务无法远程登录
一.10061错误 Ubuntu安装MySQL . sudo apt-get install mysql-server . apt-get isntall mysql-client . sudo ap ...
Java数组(4)：数组实用功能
Java标准类库的System.arraycopy()方法,及在java.utils.Arrays类中一套用于数组的static方法,都是操纵数组实用功能.下面分别介绍. (1) 数组的复制 (2) ...
java数据结构之WeakHashMap
一.JAVA中的四种引用类型 1.强引用(StrongReference):强引用是最为普遍的一种引用,如果对象被强引用,那么垃圾回收器无论如何都不会回收它,当内存不足时会抛出OutOfMemoryE ...
spring-boot集成6：集成redis实现字典缓存功能
Why redis? redis是基于内存的key-value系统,可以用作缓存中间件或者消息中间件,spring-boot提供了方便的方式和redis集成. 1.maven依赖 <!--red ...
mariadb第一章
1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来管理数据库里的数 ...
NumSharp的数组切片功能
NumSharp的数组切片功能原文地址:https://medium.com/scisharp/slicing-in-numsharp-e56c46826630 翻译初稿(英文水平有限,请多包涵): ...
Comparator接口实现排序
对任意类型集合对象进行整体排序,排序时将此接口的实现传递给Collections.sort方法或者Arrays.sort方法排序.实现int compare(T o1, T o2);方法,返回正数,零 ...
PYTHON 100days学习笔记007-3：字符串和常用数据结构
目录 Day007:字符串和常用数据结构 1.使用字符串 2.使用列表 3.使用元组 4.使用字典 4.练习 4.1:在屏幕上显示跑马灯文字 4.2 设计一个函数产生指定长度的验证码,验证码由大小写字 ...

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

上传图片,语音,和富文本（webuploader,dropzone, froala）的更多相关文章

随机推荐

热门专题