Initial commit，修正
This commit is contained in:
Executable
+168
@@ -0,0 +1,168 @@
|
||||
<?php
|
||||
use yii\helpers\Html;
|
||||
use yii\helpers\Url;
|
||||
use \yii\widgets\LinkPager;
|
||||
|
||||
$max_multi = 1; //单次最多上传数量；默认是300张
|
||||
$max_size = 1024*1024*3; //3M，换算成字节
|
||||
$total_size = 1024*1024*50; //50M
|
||||
|
||||
?>
|
||||
<?=Html::cssFile('@web/css/plugins/webuploader/webuploader.css')?>
|
||||
<?=Html::cssFile('@web/css/demo/webuploader-demo.min.css')?>
|
||||
|
||||
<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;?>张</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 = '../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')?>
|
||||
<?=Html::jsFile('@web/js/demo/webuploader-demo.min.js')?>
|
||||
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<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 hidden">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
<div class="row">
|
||||
<div class="table-responsive">
|
||||
|
||||
<form class="form-search" method="get" action="<?=Url::toRoute(["upload/image"])?>" role="form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
<div class="input-group">
|
||||
<button type="submit" style="margin-top: 42%"
|
||||
class="btn form-control btn-sm btn-primary">
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</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-4 col-md-3 col-lg-2">
|
||||
<div class="thumbnail" data-toggle="tooltip" data-placement="top" title="点击图片即可选择">
|
||||
<img style="height:300px;" alt="<?=$val['title']?>" src="<?=$src.$val['route']?>" title="<?=$val['title']?>" onclick="markImage(this);parent.selectImage('<?=$val['title']?>','<?=$val['route']?>','<?=$src.$val['route']?>','<?=$callback?>');" />
|
||||
</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>
|
||||
</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"});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
Executable
+89
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
use yii\helpers\Html;
|
||||
use yii\helpers\Url;
|
||||
?>
|
||||
<?=Html::cssFile('@web/css/plugins/webuploader/webuploader.css')?>
|
||||
<?=Html::cssFile('@web/css/demo/webuploader-demo.min.css')?>
|
||||
|
||||
<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>或将照片拖到这里，单次最多可选300张</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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var BASE_URL = 'js/plugins/webuploader';
|
||||
var UPLOAD_SERVER_URL = '<?= Url::home().'/upload.php';?>';
|
||||
// var UPLOAD_SERVER_URL = '../js/plugins/webuploader/upload.php';
|
||||
</script>
|
||||
<?=Html::jsFile('@web/js/plugins/webuploader/webuploader.min.js')?>
|
||||
<?=Html::jsFile('@web/js/demo/webuploader-demo.min.js')?>
|
||||
|
||||
<div class="wrapper wrapper-content">
|
||||
<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="alert alert-info">
|
||||
点击图片即可选择
|
||||
</div>
|
||||
<form role="form" class="form-horizontal m-t">
|
||||
|
||||
|
||||
</form>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user