538 lines
21 KiB
PHP
Executable File
538 lines
21 KiB
PHP
Executable File
<?php
|
||
use yii\helpers\Html;
|
||
use yii\helpers\Url;
|
||
use \yii\widgets\LinkPager;
|
||
|
||
$max_multi = 30; //单次最多上传数量；默认是300张
|
||
$max_size = 1024*1024*15; //15M，换算成字节
|
||
$total_size = 1024*1024*450; //450M
|
||
?>
|
||
<?=Html::cssFile('@web/css/plugins/webuploader/webuploader.css')?>
|
||
<?=Html::cssFile('@web/css/demo/webuploader-demo.min.css')?>
|
||
|
||
<!--日期时间选择器-->
|
||
<?=Html::jsFile('@web/js/plugins/layer/laydate/laydate.js')?>
|
||
<?=Html::cssFile('@web/js/plugins/layer/laydate/need/laydate.css')?>
|
||
<?=Html::cssFile('@web/js/plugins/layer/laydate/skins/molv/laydate.css')?>
|
||
|
||
<style>
|
||
#laydate_box{
|
||
margin-left: -50px;
|
||
}
|
||
.laydate_body .laydate_top{
|
||
padding:0;
|
||
}
|
||
.laydate_body .laydate_ym{
|
||
/*margin:0;
|
||
padding:5px;*/
|
||
}
|
||
.laydate_body .laydate_table{
|
||
border:0;
|
||
border-bottom: 1px solid rgb(204, 204, 204);
|
||
}
|
||
.laydate_body .laydate_bottom {
|
||
border: 0;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|
||
<script>
|
||
laydate.skin('molv');
|
||
</script>
|
||
|
||
<div class="wrapper wrapper-content animated fadeIn">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>图片上传</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div class="page-container">
|
||
<p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮.</p>
|
||
<div id="uploader" class="wu-example">
|
||
<div class="queueList">
|
||
<div id="dndArea" class="placeholder">
|
||
<div id="filePicker"></div>
|
||
<p>或将照片拖到这里，单次最多可选<?php echo $max_multi;?>张;单张图片大小不超过<?php echo $max_size/1024/1024?>M</p>
|
||
</div>
|
||
</div>
|
||
<div class="statusBar" style="display:none;">
|
||
<div class="progress">
|
||
<span class="text">0%</span>
|
||
<span class="percentage"></span>
|
||
</div>
|
||
<div class="info"></div>
|
||
<div class="btns">
|
||
<div id="filePicker2"></div>
|
||
<div class="uploadBtn">开始上传</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<div class="input-group">
|
||
<span class="input-group-btn"> <button id="callback-title" type="button" class="btn btn-primary">图片标题
|
||
</button> </span>
|
||
<input class="form-control" type="text" id="callback" name="callback" placeholder="文件保存地址" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var UPLOAD_BUTTON_LABEL = '点击选择图片';
|
||
var UPLOAD_BASE_URL = 'js/plugins/webuploader'; //上传组件目录定义
|
||
var UPLOAD_SERVER_URL = '<?php echo Yii::getAlias("@web");?>/js/plugins/webuploader/upload.php?pid=<?php echo $_SESSION['pid'];?>&dir=<?php echo Yii::getAlias("@upload");?>&type=pics'; //服务器上传处理地址
|
||
var UPLOAD_JSON_POST_URL = '<?=Url::toRoute(["upload/image_save"])?>'; //上传成功后的业务逻辑地址
|
||
var UPLOAD_ACCEPT_EXTENSIONS = "gif,jpg,jpeg,bmp,png"; //允许的文件后缀
|
||
var UPLOAD_ACCEPT_FILETYPE = "image/*"; //允许的文件类型
|
||
var UPLOAD_ACCEPT_TITLE = 'Images';
|
||
var UPLOAD_MAX_NUM = '<?php echo $max_multi;?>'; //最大同时上传文件数
|
||
var UPLOAD_MAX_SIZE = '<?php echo $max_size;?>'; //最大单文件大小,bytes
|
||
var UPLOAD_TOTAL_SIZE = '<?php echo $total_size;?>'; //最大同时上传文件大小,bytes
|
||
</script>
|
||
<?=Html::jsFile('@web/js/plugins/webuploader/webuploader.min.js')?>
|
||
<<script>
|
||
jQuery(function() {
|
||
function e(e) {
|
||
var a = o('<li id="' + e.id + '"><p class="title">' + e.name + '</p><p class="imgWrap"></p><p class="progress"><span></span></p></li>'),
|
||
s = o('<div class="file-panel"><span class="cancel">删除</span><span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span></div>').appendTo(a),
|
||
i = a.find("p.progress span"),
|
||
t = a.find("p.imgWrap"),
|
||
r = o('<p class="error"></p>'),
|
||
d = function(e) {
|
||
switch (e) {
|
||
case "exceed_size":
|
||
text = "文件大小超出限制";
|
||
break;
|
||
case "interrupt":
|
||
text = "上传暂停";
|
||
break;
|
||
default:
|
||
text = "上传失败，请重试"
|
||
}
|
||
r.text(text).appendTo(a)
|
||
};
|
||
"invalid" === e.getStatus() ? d(e.statusText) : (t.text("预览中"), n.makeThumb(e,
|
||
function(e, a) {
|
||
if (e) return void t.text("不能预览");
|
||
var s = o('<img src="' + a + '">');
|
||
t.empty().append(s)
|
||
},
|
||
v, b), w[e.id] = [e.size, 0], e.rotation = 0),
|
||
e.on("statuschange",
|
||
function(t, n) {
|
||
"progress" === n ? i.hide().width(0) : "queued" === n && (a.off("mouseenter mouseleave"), s.remove()),
|
||
"error" === t || "invalid" === t ? (console.log(e.statusText), d(e.statusText), w[e.id][1] = 1) : "interrupt" === t ? d("interrupt") : "queued" === t ? w[e.id][1] = 0 : "progress" === t ? (r.remove(), i.css("display", "block")) : "complete" === t && a.append('<span class="success"></span>'),
|
||
a.removeClass("state-" + n).addClass("state-" + t)
|
||
}),
|
||
a.on("mouseenter",
|
||
function() {
|
||
s.stop().animate({
|
||
height: 30
|
||
})
|
||
}),
|
||
a.on("mouseleave",
|
||
function() {
|
||
s.stop().animate({
|
||
height: 0
|
||
})
|
||
}),
|
||
s.on("click", "span",
|
||
function() {
|
||
var a, s = o(this).index();
|
||
switch (s) {
|
||
case 0:
|
||
return void n.removeFile(e);
|
||
case 1:
|
||
e.rotation += 90;
|
||
break;
|
||
case 2:
|
||
e.rotation -= 90
|
||
}
|
||
x ? (a = "rotate(" + e.rotation + "deg)", t.css({
|
||
"-webkit-transform": a,
|
||
"-mos-transform": a,
|
||
"-o-transform": a,
|
||
transform: a
|
||
})) : t.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + ~~ (e.rotation / 90 % 4 + 4) % 4 + ")")
|
||
}),
|
||
a.appendTo(l)
|
||
}
|
||
|
||
function a(e) {
|
||
var a = o("#" + e.id);
|
||
delete w[e.id],
|
||
s(),
|
||
a.off().find(".file-panel").off().end().remove()
|
||
}
|
||
|
||
function s() {
|
||
var e, a = 0,
|
||
s = 0,
|
||
t = f.children();
|
||
o.each(w,
|
||
function(e, i) {
|
||
s += i[0],
|
||
a += i[0] * i[1]
|
||
}),
|
||
e = s ? a / s: 0,
|
||
t.eq(0).text(Math.round(100 * e) + "%"),
|
||
t.eq(1).css("width", Math.round(100 * e) + "%"),
|
||
i()
|
||
}
|
||
|
||
function i() {
|
||
var e, a = "";
|
||
"ready" === k ? a = "选中" + m + "张图片，共" + WebUploader.formatSize(h) + "。": "confirm" === k ? (e = n.getStats(), e.uploadFailNum && (a = "已成功上传" + e.successNum + "张照片，" + e.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>')) : (e = n.getStats(), a = "共" + m + "张（" + WebUploader.formatSize(h) + "），已上传" + e.successNum + "张", e.uploadFailNum && (a += "，失败" + e.uploadFailNum + "张")),
|
||
p.html(a)
|
||
}
|
||
|
||
function t(e) {
|
||
var a;
|
||
if (e !== k) {
|
||
switch (c.removeClass("state-" + k), c.addClass("state-" + e), k = e) {
|
||
case "pedding":
|
||
u.removeClass("element-invisible"),
|
||
l.parent().removeClass("filled"),
|
||
l.hide(),
|
||
d.addClass("element-invisible"),
|
||
n.refresh();
|
||
break;
|
||
case "ready":
|
||
u.addClass("element-invisible"),
|
||
o("#filePicker2").removeClass("element-invisible"),
|
||
l.parent().addClass("filled"),
|
||
l.show(),
|
||
d.removeClass("element-invisible"),
|
||
n.refresh();
|
||
break;
|
||
case "uploading":
|
||
o("#filePicker2").addClass("element-invisible"),
|
||
f.show(),
|
||
c.text("暂停上传");
|
||
break;
|
||
case "paused":
|
||
f.show(),
|
||
c.text("继续上传");
|
||
break;
|
||
case "confirm":
|
||
//处理上传完成事件
|
||
if (f.hide(), c.text("开始上传").addClass("disabled"), a = n.getStats(), a.successNum && !a.uploadFailNum) return void t("finish");
|
||
break;
|
||
case "finish":
|
||
//上传完成后执行
|
||
a = n.getStats(),
|
||
a.successNum ? alert("上传成功") : (k = "done", location.reload());
|
||
o("#filePicker2").removeClass("element-invisible");
|
||
c.text("再次上传").removeClass("disabled");
|
||
n.refresh();
|
||
break;
|
||
}
|
||
i()
|
||
}
|
||
}
|
||
|
||
function fpost(data,url){
|
||
//异步提交文件上传成功后获取的JSON字符串解析传到指定的网址，以便进行下一步的处理
|
||
jQuery.post(url,data,function(res){
|
||
console.log(res);
|
||
res = $.parseJSON(res);
|
||
var img = res.path;
|
||
$('#callback').val(img);
|
||
//将刚上传成功的图片显示到现有列表中
|
||
|
||
var $img = '<div class="col-sm-2 col-md-1 col-lg-1">'+
|
||
'<div class="thumbnail selected" data-toggle="tooltip" data-placement="top" title="点击图片即可选择">'+
|
||
'<img style="max-height:150px;" class="used" alt="新上传图片" src="<?=$src?>'+img+'" data-src="'+img+'" title="新上传图片" onclick="markImage(this);" />'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#imageList').prepend($img);
|
||
});
|
||
}
|
||
|
||
var n, o = jQuery,
|
||
r = o("#uploader"),
|
||
l = o('<ul class="filelist"></ul>').appendTo(r.find(".queueList")),
|
||
d = r.find(".statusBar"),
|
||
p = d.find(".info"),
|
||
c = r.find(".uploadBtn"),
|
||
u = r.find(".placeholder"),
|
||
f = d.find(".progress").hide(),
|
||
m = 0,
|
||
h = 0,
|
||
g = window.devicePixelRatio || 1,
|
||
v = 110 * g,
|
||
b = 110 * g,
|
||
k = "pedding",
|
||
w = {},
|
||
x = function() {
|
||
var e = document.createElement("p").style,
|
||
a = "transition" in e || "WebkitTransition" in e || "MozTransition" in e || "msTransition" in e || "OTransition" in e;
|
||
return e = null,
|
||
a
|
||
} ();
|
||
|
||
if (!WebUploader.Uploader.support()) throw alert("Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器"),
|
||
new Error("WebUploader does not support the browser you are using.");
|
||
|
||
//初始化上传组件
|
||
n = WebUploader.create({
|
||
pick: {
|
||
id: "#filePicker",
|
||
innerHTML: UPLOAD_BUTTON_LABEL
|
||
},
|
||
dnd: "#uploader .queueList",
|
||
paste: document.body,
|
||
accept: {
|
||
title: UPLOAD_ACCEPT_TITLE,
|
||
extensions: UPLOAD_ACCEPT_EXTENSIONS,
|
||
mimeTypes: UPLOAD_ACCEPT_FILETYPE
|
||
},
|
||
swf: UPLOAD_BASE_URL + "/Uploader.swf",
|
||
disableGlobalDnd: !0,
|
||
chunked: true, //开启分片上传
|
||
duplicate: true, //去重
|
||
server: UPLOAD_SERVER_URL,
|
||
fileNumLimit: UPLOAD_MAX_NUM,
|
||
fileSizeLimit: UPLOAD_TOTAL_SIZE,
|
||
fileSingleSizeLimit: UPLOAD_MAX_SIZE //单张图大小限制
|
||
}),
|
||
n.addButton({
|
||
id: "#filePicker2",
|
||
label: "继续添加"
|
||
}),
|
||
n.onUploadProgress = function(e, a) {
|
||
var i = o("#" + e.id),
|
||
t = i.find(".progress span");
|
||
t.css("width", 100 * a + "%"),
|
||
w[e.id][1] = a,
|
||
s()
|
||
},
|
||
n.onFileQueued = function(a) {
|
||
m++,
|
||
h += a.size,
|
||
1 === m && (u.addClass("element-invisible"), d.show()),
|
||
e(a),
|
||
t("ready"),
|
||
s()
|
||
},
|
||
n.onFileDequeued = function(e) {
|
||
m--,
|
||
h -= e.size,
|
||
m || t("pedding"),
|
||
a(e),
|
||
s()
|
||
},
|
||
n.on("all",
|
||
function(e) {
|
||
switch (e) {
|
||
case "uploadFinished":
|
||
t("confirm");
|
||
break;
|
||
case "startUpload":
|
||
t("uploading");
|
||
break;
|
||
case "stopUpload":
|
||
t("paused");
|
||
break;
|
||
}
|
||
}),
|
||
n.onError = function(e) {
|
||
alert("Error: " + e)
|
||
},
|
||
n.on("uploadSuccess",
|
||
function($file,$res){
|
||
//$file,当前上传的文件信息
|
||
console.log($file);
|
||
//$res,服务器返回的信息(服务端返回了文件路径跟链接等信息)
|
||
console.log($res);
|
||
$res = $res._raw;
|
||
console.log($res);
|
||
$res = $res + '}';
|
||
console.log($res);
|
||
$res = $.parseJSON($res); //由JSON字符串转换为JSON对象
|
||
console.log($res);
|
||
var res = $res.result;
|
||
console.log(res);
|
||
$('#callback-title').html(res.name);
|
||
if(UPLOAD_JSON_POST_URL){
|
||
res.size = $file.size;
|
||
res.type = $file.type;
|
||
res.lasttime = $file.lastModifiedDate;
|
||
res.ext = $file.ext;
|
||
res.params = $file._info;
|
||
fpost(res,UPLOAD_JSON_POST_URL);
|
||
}
|
||
}
|
||
),
|
||
|
||
c.on("click",
|
||
function() {
|
||
return o(this).hasClass("disabled") ? !1 : void("ready" === k ? n.upload() : "paused" === k ? n.upload() : "uploading" === k && n.stop())
|
||
}),
|
||
p.on("click", ".retry",
|
||
function() {
|
||
n.retry()
|
||
}),
|
||
p.on("click", ".ignore",
|
||
function(e) {
|
||
alert("好的");
|
||
console.log('取消了已经上传失败的文件');
|
||
}),
|
||
c.addClass("state-" + k),
|
||
s()
|
||
});
|
||
</script>
|
||
|
||
<div class="wrapper wrapper-content">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-content" style="text-align: center;">
|
||
<h1>搜索与筛选</h1>
|
||
<form role="form" class="form-horizontal m-t" action="" method="post">
|
||
<input type="hidden" name="_csrf-backend" value="<?= Yii::$app->getRequest()->getCsrfToken();?>" />
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<span class="input-group-btn">
|
||
<button type="button" class="btn btn-sm btn-primary">上传时间</button>
|
||
</span>
|
||
<input class="input-sm form-control layer-date" type="text" name="search[create_m]" placeholder="请选择月份" autocomplete="off" onclick="laydate({istime: false, format: 'YYYY-MM'})" value="<?=isset($search['create_m'])?$search['create_m']:''?>">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<span class="input-group-btn">
|
||
<button type="button" class="btn btn-sm btn-primary">时间不早于</button>
|
||
</span>
|
||
<input class="input-sm form-control layer-date" type="text" name="search[create_after]" placeholder="请选择日期" autocomplete="off" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})" value="<?=isset($search['create_after'])?$search['create_after']:''?>">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<span class="input-group-btn">
|
||
<button type="button" class="btn btn-sm btn-primary">时间不晚于</button>
|
||
</span>
|
||
<input class="input-sm form-control layer-date" type="text" name="search[create_before]" placeholder="请选择日期" autocomplete="off" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})" value="<?=isset($search['create_before'])?$search['create_before']:''?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<input class="form-control" type="text" placeholder="模糊检索图片标题" name="search[title]" id="title" value="<?=isset($search['title'])?$search['title']:''?>">
|
||
<span class="input-group-btn">
|
||
<button type="button" class="btn btn-info" onclick="clearBind('title')">清除</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
function clearBind(id)
|
||
{
|
||
$('#'+id).val('');
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-12">
|
||
<button type="submit" class="btn btn-sm btn-info"> 搜索</button>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>您还可以直接选取已有图片</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12">
|
||
<div class="ibox-content">
|
||
<div class="row" id="imageList">
|
||
<?php foreach($list as $val){ ?>
|
||
<div class="col-sm-2 col-md-1 col-lg-1">
|
||
<div class="thumbnail" data-toggle="tooltip" data-placement="top" title="<?=$val['title']?> 点击图片即可选择">
|
||
<img style="max-height:150px;" alt="<?=$val['title']?>" src="<?=$src.$val['route']?>" data-src="<?=$val['route']?>" title="<?=$val['title']?>" onclick="markImage(this);" />
|
||
</div>
|
||
</div>
|
||
<?php } ?>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="table-responsive">
|
||
<div>
|
||
<!--分页-->
|
||
<div class="f-r" style="text-align: center;">
|
||
<?= LinkPager::widget([
|
||
'pagination'=>$pager,
|
||
'firstPageLabel' => '首页',
|
||
'nextPageLabel' => '下一页',
|
||
'prevPageLabel' => '上一页',
|
||
'lastPageLabel' => '末页',
|
||
]) ?>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.row -->
|
||
</div><!-- /.main-container -->
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 " style="text-align: center;margin-top:15px;">
|
||
<div id="SelectPhotos" class="btn btn-info" onclick="confirm();">确认</div>
|
||
<div id="CancelPhotos" class="btn btn-warning" onclick="cancel();">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
#imageList .selected{
|
||
border-color:#0095f6;
|
||
background-color:#0095f6;
|
||
box-shadow: 3px 5px 2px;
|
||
}
|
||
</style>
|
||
<script>
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
// function markImage(obj){
|
||
// $('#imageList .selected').removeClass('selected');
|
||
// $(obj).parent().addClass('selected');
|
||
// $(obj).parent().css({"border-color":"#0095f6","background-color":"#0095f6"});
|
||
// }
|
||
function markImage(obj){
|
||
$(obj).parent().toggleClass('selected');
|
||
$(obj).toggleClass('used');
|
||
}
|
||
|
||
function cancel(){
|
||
parent.layer.closeAll();
|
||
layer.msg('取消操作！');
|
||
}
|
||
|
||
function confirm(){
|
||
var obj = $('#imageList .selected>img');
|
||
var l=obj.length,imgs=[];
|
||
for (i = 0; i < l; i++) {
|
||
var a = $(obj[i]);
|
||
imgs.push(a.context.dataset.src);
|
||
}
|
||
parent.selectImages(imgs,'<?=$callback?>');
|
||
}
|
||
</script>
|