cf-platform/Application/Admin/View/Qiniu/index.html

<extend name="Public/base" />

<block name="style">
	<style>
		.sidebar .right-cnt{
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			-webkit-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
			-moz-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
			box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
			min-height: 530px;
			display: block;
			border: 1px solid #c9ccd0;
			background-color: #fff;
		}
		.sidebar .right-head{
			overflow: hidden;
			padding: 0 30px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 14px;
			border-bottom: 1px solid #c9ccd0;
			background-color: #dee0e6;
			background-image: url(../../image/report/gradient-line.png);
			background-position: top;
			background-repeat: no-repeat;
			-webkit-border-top-right-radius: 5px;
			-moz-border-radius-topright: 5px;
			border-top-right-radius: 5px;
			-webkit-border-top-left-radius: 5px;
			-moz-border-radius-topleft: 5px;
			border-top-left-radius: 5px;
		}
		.sidebar .prev-block{
			width: 100%;
			height: 203px;
			line-height: 203px;
			margin-bottom: 40px;
			text-align: center;
		}
		.sidebar .prev-block .file-prev{
			max-width: 203px;
			max-height: 203px;
			vertical-align: middle;
			background-color: #f0f0f0;
			-webkit-box-shadow: 0 0 2px rgba(120,120,120,0.5);
			-moz-box-shadow: 0 0 2px rgba(120,120,120,0.5);
			box-shadow: 0 0 2px rgba(120,120,120,0.5);
		}
	}
	.sidebar .right-body-block .file-info-item {
		margin-bottom: 8px;
	}
</style>
</block>

<block name="sidebar">
	<div class="right-cnt">
		<!-- ko ifnot: certainFile -->
		<div class="right-head">
			未选择文件
		</div>
		<div class="right-body">
			<div class="right-body-block">
				<div class="prev-block">
					<span>点击左侧文件名以查看信息</span>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- ko with: certainFile --><!-- /ko -->
	</div>
</block>
<block name="body">
	<!-- 标题栏 -->
	<div class="main-title">
		<h2>blackwhite的七牛空间</h2>
	</div>
	<div>
		<form action="__SELF__" method="post">
			<input type="text" class="search-input" name="prefix" placeholder="输入资源名前缀匹配">
			<button class="btn" type="submit">搜索</button>

			<input type="file" name="file" id="upload-file">
			<button class="btn" target-form="ids" id="batchDelBtn" type="button">删 除</button>
			<a href="javascript:location.reload(true);" class="btn">刷新</a>
		</form>
	</div>

	<!-- 数据列表 -->
	<div class="data-table table-striped">
		<form action="{:U('batchDel')}" id="ids">
			<table id="file_list">
				<thead>
					<tr>
						<th></th>
						<th>文件名</th>
						<th>mimeType</th>
						<th >最后更新时间</th>
						<th>文件大小</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<volist name="_list" id="vo">
						<tr>
							<td><input type="checkbox" name="key" value="{$vo.key}"></td>
							<td>{$vo.key}</td>
							<td>{$vo.mimeType} </td>
							<td>{$vo.putTime|strval|substr=###,0,11|bcmul="1000000000"|date="Y-m-d H:i:s",###}</td>
							<td>{$vo.fsize|format_bytes}</td>
							<td>
								<a href="javascript:;" data-href="{:U('rename?file='.$vo['key'])}" class="rename" title="{$vo.key}">重命名</a>
								<a href="{:$qiniu->downLink($vo['key'])}" target="_blank">下载</a>
								<a href="{:U('del?file='.$vo['key'])}">删除</a>
								<a href="javascript:adv('{$vo.mimeType}','{$vo.key}')">高级</a>
							</td>
						</tr>
					</volist>
				</tbody>
			</table>
		</form>
	</div>
	<!-- 分页 -->
	<div class="page">
		{$_page}
	</div>
</block>

<block name="script">
	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
	<script type="text/javascript" src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

	<script id="hooktpl" type="text/tpl">
		<form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
			<label class="item-label">请输入文件名：</label>
			<div class="controls">
				<label class="textarea">
					<input type="text" name="new_name" class="input-large" />
				</label>
			</div>
		</form>
	</script>

	<script id="imgAdv" type="text/tpl">
		<p>
			<table>
				<tbody>
					<tr>
						<td>
							<input type="radio" class="type" name="type" value=0 checked>
						</td>
						<td>
							查看基本信息
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" class="type" name="type" value=1>
						</td>
						<td>
							查看exif
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" class="type" name="type" value=2>
						</td>
						<td>
							<form action="{:U('Qiniu/dealImage')}" class="form-horizontal hooktpl" id="resize_form" target="_blank" method="post">
								<label class="item-label">缩放类型：</label>
								<div class="controls">
									<label class="radio">
										<input type="radio" name="mode" value="1">
										非等比缩放
									</label>
									<label class="radio">
										<input type="radio" name="mode" value="2" checked>
										等比缩放
									</label>
								</div>
								<div class="controls">
									<label class="text">
										宽度
										<input type="text" name="w">
									</label>
									<label class="text">
										高度
										<input type="text" name="h">
									</label>
								</div>
								<div class="controls">
									<label class="text">
										质量
										<input type="text" name="q" value="100">(1~100)
									</label>
									<label class="select">
										输出格式：
										<select	name="format">
											<option>jpg</option>
											<option>gif</option>
											<option>png</option>
											<option>webp</option>
										</select>
									</label>
									<input type="hidden" name="imageView" value=1>
									<input type="hidden" name="key">
								</div>
							</form>
						</td>
					</tr>
				</tbody>
			</table>
		</p>
	</script>

	<script id="videoAdv" type="text/tpl">
		<form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
			<label class="item-label">请输入文件名：</label>
			<div class="controls">
				<label class="textarea">
					<input type="text" name="new_name" class="input-large" />
				</label>
			</div>
		</form>
	</script>

	<script id="mdAdv" type="text/tpl">
		<form action="{:U('Qiniu/dealDoc')}" class="form-horizontal hooktpl" id="translate_form" target="_blank" method="post">
			<label class="item-label">请输入远程css路径：</label>
			<div class="controls">
				<label class="textarea">
					<input type="text" name="cssurl" class="input-large" />
				</label>
			</div>
			<label class="item-label">请选择模式：</label>
			<div class="controls">
				<label class="radio">
					<input type="radio" name="mode" value=0 checked/>
					完整的 HTML(head+body) 输出
				</label>
				<label class="radio">
					<input type="radio" name="mode" value=1 />
					只转为HTML Body
				</label>
			</div>
			<input type="hidden" name="key">
		</form>
	</script>

	<script type="text/javascript">
		(function($){
			//上传文件
			/* 初始化上传插件 */
			$("#upload-file").uploadify({
				"height"          : 30,
				"swf"             : "__STATIC__/uploadify/uploadify.swf",
				"fileObjName"     : "qiniu_file",
				"buttonText"      : "上传文件",
				"uploader"        : "{:U('uploadOne',array('session_id'=>session_id(),'ajax'=>1))}",
				"width"           : 120,
				'removeTimeout'   : 1,
				'onInit'		  : init,
				'multi'			  : false,
				"onUploadSuccess" : uploadSuccess,
				'onFallback' : function() {
		            alert('未检测到兼容版本的Flash.');
		        }
			});
			function init(){
				$('#upload-file, #upload-file-queue').css('display','inline-block');
			}

			/* 文件上传成功回调函数 */
			function uploadSuccess(file, data){
				console.log(data);
				var data = $.parseJSON(data);
				if(data.status){
					updateAlert('上传成功', 'alert-success');
					setTimeout(function(){
						location.reload(true);
					},1500);
				} else {
					console.log(data.data);
					updateAlert('上传失败');
				}
			}

			//文件信息预览
			$('#file_list tr').click(function(event){
				$target = $(event.target);
				$tr = $(this);
				if(!$target.is(':checkbox')){
					$('#file_list :checkbox').removeAttr('checked');
					$tr.find(':checkbox').prop('checked',true);
					$.ajax({
						url : '{:U('detail')}',
						data : { key : $('td:eq(1)', $tr).text()},
						success: function(data){
							if(data.status){
								$('.sidebar .right-cnt').html(data.tpl);
							}else{
								updateAlert('获取文件信息失败');
							}
						}
					})
				}
			});

			//批量删除
			$('#batchDelBtn').click(function(){
				var $checked = $('#file_list input[name="key"]:checked');
				if($checked.length != 0){
					if(confirm('您确认删除吗？')){
						$.ajax({
							url : '{:U('batchDel')}',
							data : { key : $checked.serializeArray()},
							success: function(data){
								if(data.status){
									updateAlert('删除成功','alert-success');
									location.reload(true);
								}else{
									updateAlert('批量删除失败');
								}
							}
						});
					}
				}else{
					updateAlert('请先选择一项');
				}
				return false;
			});

			//重命名


			$('.rename').click(function(){
				var action = $.trim($(this).data('href'));
				var html = $($("#hooktpl").html());
				html.find("input[name=new_name]").val(this.title);
				html.find("input[name=new_name]").parents('form').attr('action', action);
				//ajaxForm 公共函数
		        function ajaxForm(element,callback,dataType){
		            var form = $(element).closest('form');
		            var dataType = dataType || 'json';
		            $.ajax({
		                type: "POST",
		                url: form.attr('action'),
		                data: form.serialize(),
		                async: false,
		                dataType:dataType,
		                success: function(data) {
		                    if($.isFunction(callback)){
		                        callback(data,form);
		                    }
		                }
		            });
		        }

				option = {
					title:'文件名更改',
					actions:['close'],
					drag:true,
					tools:true,
					buttons:{"ok":['保存', 'blue',function(){
						var _this = this;
						ajaxForm(this.find('.input-large'),function(data){
							if (data.status){
								_this.hide();
								updateAlert(data.info,'alert-success');
								setTimeout(function(){
		                        	location.reload(true);
		                        },1000);
				            }else{
				            	updateAlert(data.info);
				            }
						})
					}]}
				}
				$.thinkbox(html,option);
			});

		})(jQuery);
		//高级处理
		function adv(mime, key){
			if($.inArray(mime,['image/jpeg','image/png', 'image/gif']) != -1){
				//图片
				var html = $($("#imgAdv").html());
				var option = {
					title:'图片处理',
					actions:['close'],
					drag:true,
					tools:true,
					buttons:{"ok":['提 交', 'blue',function(){
						var _this = this;
						var type = this.find('[name="type"]:checked').val();
						if(type == 2){
							this.find('[name=key]').val(key);
							this.find('#resize_form').submit();
						}else if(type == 0){
							window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&imageInfo=1'));
						}else{
							window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&exif=1'))
						}
						this.hide();
					}]}
				}
			}else if(key.slice(-3) == '.md'){
				//markdown
				var html = $($("#mdAdv").html());
				var option = {
					title:'md2html转换',
					actions:['close'],
					drag:true,
					tools:true,
					buttons:{"ok":['提交', 'blue',function(){
						var _this = this;
						this.find('[name=key]').val(key);
						this.find('#translate_form').submit();
					}]}
				}
			}else{
				//视频
				var html = $($("#videoAdv").html());
				var option = {
					title:'视频处理',
					actions:['close'],
					drag:true,
					tools:true,
					buttons:{"ok":['保存', 'blue',function(){
						var _this = this;
						ajaxForm(this.find('.input-large'),function(data){
							if (data.status){
								_this.hide();
								updateAlert(data.info,'alert-success');
								setTimeout(function(){
		                        	location.reload(true);
		                        },1000);
				            }else{
				            	updateAlert(data.info);
				            }
						})
					}]}
				}
			}
			$.thinkbox(html,option);
		}
	</script>
</block>