 <link href="sys/js/uploadify/v3/uploadify.css" th:href="@{/static/sys/js/uploadify/v3/uploadify.css}" rel="stylesheet"/>
<script src="sys/js/uploadify/v3/jquery.uploadify.min.js" th:src="@{/static/sys/js/uploadify/v3/jquery.uploadify.min.js}"></script>

<style type="text/css">
.uploadify {
    left: 105px;
}
.uploadify-button {
    background-color: #ff9913;
    background-image: linear-gradient(bottom, #ff9913 0%, #ff9913 100%);
    background-image: -o-linear-gradient(bottom, #ff9913 0%, #ff9913 100%);
    background-image: -moz-linear-gradient(bottom, #ff9913 0%, #ff9913 100%);
    background-image: -webkit-linear-gradient(bottom, #ff9913 0%, #ff9913 100%);
    background-image: -ms-linear-gradient(bottom, #ff9913 0%, #ff9913 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #ff9913), color-stop(1, #ff9913) );
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ff9913;
    color: #FFF;
    font: 14px Microsoft YaHei;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0);
    width: 100%;
}
.uploadify:hover .uploadify-button {
	background-color: #f18900;
	background-image: linear-gradient(top, #f18900 0%, #f18900 100%);
	background-image: -o-linear-gradient(top, #f18900 0%, #f18900 100%);
	background-image: -moz-linear-gradient(top, #f18900 0%, #f18900 100%);
	background-image: -webkit-linear-gradient(top, #f18900 0%, #f18900 100%);
	background-image: -ms-linear-gradient(top, #f18900 0%, #f18900 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #f18900),
		color-stop(1, #f18900)
	);
	background-position: center bottom;
}
  </style>
  <script type="text/javascript">
function uploadOptions(buttonId,buttonText){
	var uploads = {
			buttonId: buttonId, //上传按钮ID
			buttonText: buttonText, //上传按钮文本
			auto: true, //是否自动上传
			queueID: "upload_file_view", //文件选择后的容器ID
			uploader: "[[${sysUrl}]]/file/uploads", //上传处理URL
			fileTypeExts: "*.jpg;*.png;*.jpeg;*.gif", //允许上传的文件后缀
			fileSizeLimit: '5000KB', //上传文件的大小限制
			queueSizeLimit: 1 //上传数量
		};
	return uploads;
}
function uploadAudio(buttonId,buttonText){
	var uploads = {
			buttonId: buttonId, //上传按钮ID
			buttonText: buttonText, //上传按钮文本
			auto: true, //是否自动上传
			queueID: "upload_file_view", //文件选择后的容器ID
			uploader: "[[${sysUrl}]]/file/uploads", //上传处理URL
			fileTypeExts: "*.mp3;*.mp4", //允许上传的文件后缀
			fileSizeLimit: '50000000KB', //上传文件的大小限制
			queueSizeLimit: 1 //上传数量
		};
	return uploads;
}


//控件初始化    
/**
 *  id  input 隐藏框的ID  上传后返回的ID 保持在这
 *  idImg   img的id 上传后替换图片
 */
function initUpload(uploadOptions,id,idImg){
	$("#" + uploadOptions.buttonId).uploadify({
		//开启调试
		'debug' : false,
		//是否自动上传
		'auto' : uploadOptions.auto,
		//超时时间
		'successTimeout' : 99999,
		//附带值
		'formData' : {
			
		},
		//flash
		'swf' : "[[${sysUrl}]]/static/sys/js/uploadify/v3/uploadify.swf",
		//文件选择后的容器ID
		'queueID' : uploadOptions.queueID,
		//服务器端脚本使用的文件对象的名称 $_FILES个['upload']
		'fileObjName' : 'upload',
		//上传处理程序
		'uploader' : uploadOptions.uploader,
		//
		'buttonText' : uploadOptions.buttonText,
		'buttonClass' : 'tms-btn',
		//浏览按钮的宽度
		'width' : '84',
		//浏览按钮的高度
		'height' : '30',
		//在浏览窗口底部的文件类型下拉菜单中显示的文本
		'fileTypeDesc' : '支持的格式',
		//允许上传的文件后缀
		'fileTypeExts' : uploadOptions.fileTypeExts,
		//上传文件的大小限制
		'fileSizeLimit' : uploadOptions.fileSizeLimit,
		//上传数量
		'queueSizeLimit' : uploadOptions.queueSizeLimit,
		//返回一个错误，选择文件的时候触发
		'onSelectError' : function(file, errorCode, errorMsg) {
			switch (errorCode) {
				case -100:
					// alert("上传的文件数量已经超出系统限制的");
					break;
				case -110:
					//alert("文件 ["+file.name+"] 大小超出系统限制的大小！");
					break;
				case -120:
					//alert("文件 ["+file.name+"] 大小异常！");
					break;
				case -130:
					alert("文件 [" + file.name + "] 类型不正确！");
					break;
			}
		},
        'onUploadProgress' : function (file, fileBytesLoaded, fileTotalBytes) {
		    var percent = fileBytesLoaded / fileTotalBytes;
            if (percent == 0) {
                $("#dispaly-progress").html("<label style='color: red;font-size: 22px;font-weight: bold'>正在上传中...</label>");
            }
            if (percent == 1) {
                $("#dispaly-progress").html("<label style='color: red;font-size: 22px;font-weight: bold'>上传完成！</label>");
            }
        },
		//上传到服务器，服务器返回相应信息到data里
		'onUploadSuccess' : function(file, resData, resOk) {
			if(resData != null && resData != ""){
				var obj = $.parseJSON(resData);
				var filePath = obj.data.pics[0].filePath;
				var fileThumPath = obj.data.pics[0].fileThumPath;
				$("#"+id).val(filePath);
				if($("#"+idImg)){
					$("#"+idImg).attr("src", fileThumPath);
				}
			}
		}
	});
};

</script>