<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- 文件上传css-->
    <link th:href="@{/static/admin/assets/js/dropZone/downloads/css/dropzone.css}" rel="stylesheet"/>
    <style type="text/css">
    </style>

</head>

<body id="listbody">


<!-- ###############################代码编写处############################### -->

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <!--标题 通用-->
        <div th:replace="admin/common/html/title :: title(${title},${parenttitle},${isMsg},${msgHTML})">
        </div>
        <!-- 结束标题 通用-->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <!-- 空白页开始-->
                <div class="col-sm-6">
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>拖拽区域</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">


                            <div class="row">
                                <!-- 左边 -->
                                <div class="col-sm-12">
                                    <form class="form-horizontal m" id="form-add">
                                        <div class="form-group draggable">
                                            <label class="col-sm-3 control-label ">文件上传云库：</label>
                                            <div class="col-sm-8">
                                                <div id="dropz" class="dropzone"></div>
                                            </div>
                                        </div>
                                    </form>
                                </div><!-- /.col -->
                            </div><!-- row -->
                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->

                <!-- 空白页开始-->
                <div class="col-sm-6">
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>生成区域</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="col-sm-3">
                                            <img id="pic" name="pic" style="display: none;width: 100%;height: 100%"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->

            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->
<!-- ###############################代码编写处end############################### -->


<!-- 右侧隐藏滑块内容 -->
<div th:include="admin/common/html/rightHide :: rightHide">

</div>
<!-- END 右侧隐藏滑块内容-->

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>

<!-- 通用js -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/static/js/beautifyhtml.js}"></script>
<script type="text/javascript">
$(document).ready(function (){
	  //文件上传
	  Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误
	  var myDropzone = new Dropzone("#dropz", {
          url: rootPath+"/QiNiuCloudController/uploadToQiNiu",//文件提交地址
          method: "post",  //也可用put
          paramName: "file", //默认为file
          maxFiles: 1,//一次性上传的文件数量上限
          maxFilesize: 2, //文件大小，单位：MB
          acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
          addRemoveLinks: true,
          parallelUploads: 1,//一次上传的文件数量
          //previewsContainer:"#preview",//上传图片的预览窗口
          dictDefaultMessage: '拖动文件至此或者点击上传',
          dictMaxFilesExceeded: "您最多只能上传1个文件！",
          dictResponseError: '文件上传失败!',
          dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
          dictFallbackMessage: "浏览器不受支持",
          dictFileTooBig: "文件过大上传文件最大支持.",
          dictRemoveLinks: "删除",
          dictCancelUpload: "取消",
          init: function () {
              this.on("addedfile", function (file) {
                  //上传文件时触发的事件

              });
              this.on("success", function (file, data) {
                //上传成功触发的事件
                if(data.code==200){
                  	$("#pic").attr("src", "http://" + data.url);
                  	$("#pic").show();
              	}else if (data.code==500) {
              		$.modal.alertError(data.msg);
              		myDropzone.removeFile(file);
				}
              	else{
              		$.modal.alertError("文件为上传失败！");
              	}

              });
              this.on("error", function (file, data) {
            	  //上传失败触发的事件
	        	  $.modal.alertError(data);
              });
              this.on("removedfile", function (file) {//删除文件触发结果
                  $("#pic").val("");
              });
          }
      });
	
})
</script>

</body>


</html>
