/**
* 后台上传图片
* type 1 为小程序图片
*/
public function actionAdd(){
if($_FILES && $_FILES["image"]['name']){
$request = Yii::$app->request;
$root = '/mnt/tmpfile/static/';
$source_name = $_FILES["image"]['name'];
$image_ext = explode('.',$source_name);
if($request->post('type',0) == 1){
//保存的目录
$path = $root.'app/'.date('Ymd');
}else{
$dir_name = $request->post('dir_name',date('Ymd'));
$path = $root.$dir_name;
}
if(!is_dir($path)){
mkdir($path,0777,true);
}
$file_name = date('YmdHis').'.'.$image_ext[1];
$flag = move_uploaded_file($_FILES["image"]['tmp_name'],$path.'/'.$file_name);
if($flag){
$img_dir =str_replace('/mnt/tmpfile',$this->host,$path);
Yii::$app->db->createCommand()->insert($this->table_name,[
'name'=>$request->post('name',''),
'type'=>$request->post('type',1),
'url_big'=>$img_dir.'/'.$file_name,
'add_time'=>time(),
'source_name'=>$source_name
])->execute();
$this->redirect(Url::to(['index']));
}else{
throw new Exception('上传失败~');
}
}
return $this->render('add');
}
/**
* 刪除
* @param $id
* @return bool or string
*/
public function actionDel($id){
$id = Yii::$app->request->get('id',0);
if(!$id){
echo json_encode(['status'=>0,'message'=>'无该数据']);exit;
}
$mess = ['status'=>0,'message'=>'删除失败~'];
$curInfo = Yii::$app->db->createCommand("select * from ".$this->table_name.' where id ='.$id)->queryOne();
$image = str_replace($this->host,'/mnt/tmpfile',$curInfo['url_big']);
$res = unlink($image);//注意,删除的链接格式/mnt/tmpfile/20160503344/tete.png
if($res){
$flag = Yii::$app->db->createCommand()->delete($this->table_name,['id'=>$id])->execute();
if($flag){
$mess = ['status'=>1,'message'=>'删除成功~'];
}
}
echo json_encode($mess);exit;
}
<!-- 引入js-->
<script src="/js/bootstrap-fileinput.js"></script>
<!-- 引入css -->
<style>
.btn-file {
position: relative;
overflow: hidden;
vertical-align: middle;
}
.btn-file > input {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
font-size: 23px;
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
direction: ltr;
}
.fileinput {
display: inline-block;
margin-bottom: 9px;
}
.fileinput .form-control {
display: inline-block;
padding-top: 7px;
padding-bottom: 5px;
margin-bottom: 0;
vertical-align: middle;
cursor: text;
}
.fileinput .thumbnail {
display: inline-block;
margin-bottom: 5px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.fileinput .thumbnail > img {
max-height: 100%;
}
.fileinput .btn {
vertical-align: middle;
}
.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
display: none;
}
.fileinput-inline .fileinput-controls {
display: inline;
}
.fileinput-filename {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.form-control .fileinput-filename {
vertical-align: bottom;
}
.fileinput.input-group {
display: table;
}
.fileinput.input-group > * {
position: relative;
z-index: 2;
}
.fileinput.input-group > .btn-file {
z-index: 1;
}
.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
border-radius: 0 4px 4px 0;
}
.fileinput-new.input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new.input-group .btn-file.btn-sm,
.fileinput-new .input-group .btn-file.btn-sm {
border-radius: 0 3px 3px 0;
}
.fileinput-new.input-group .btn-file.btn-lg,
.fileinput-new .input-group .btn-file.btn-lg {
border-radius: 0 6px 6px 0;
}
.form-group.has-warning .fileinput .fileinput-preview {
color: #8a6d3b;
}
.form-group.has-warning .fileinput .thumbnail {
border-color: #faebcc;
}
.form-group.has-error .fileinput .fileinput-preview {
color: #a94442;
}
.form-group.has-error .fileinput .thumbnail {
border-color: #ebccd1;
}
.form-group.has-success .fileinput .fileinput-preview {
color: #3c763d;
}
.form-group.has-success .fileinput .thumbnail {
border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {
border-left: 0;
}
</style>
<form class="form-horizontal" role="form" method="post" action="<?=Url::to(['add'])?>" enctype='multipart/form-data' >
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">系统设置</a></li>
<li class="active">上传图片</li>
<a href="<?=Url::to(['index'])?>" class="btn btn-primary btn-sm pull-right">返回</a>
</ul>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="name" placeholder="自定义名称">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">分类</label>
<div class="col-sm-5">
<select name="type" class="form-control">
<option value="0">请选择..</option>
<option value="1">小程序</option>
<option value="2">其他</option>
</select>
</div>
</div>
<div class="form-group " style="display:none;" id="dir_name" >
<div class="col-sm-offset-2 col-sm-10">保存的目录:
<input type="text" name="dir_name" value="">
</div>
</div>
<div class="form-group" id="uploadForm" enctype="multipart/form-data">
<div class="col-sm-offset-2 col-sm-10">
<div class="h4">图片预览</div>
<div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
<div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
<img id="picImg" style="width: 100%;height: auto;max-height: 140px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWViYzM4ZTYwNSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1ZWJjMzhlNjA1Ij48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ1IiB5PSI3NC44Ij4xNDB4MTQwPC90ZXh0PjwvZz48L2c+PC9zdmc+" alt="">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">选择文件</span>
<span class="fileinput-exists">换一张</span>
<input type="file" name="image" id="picID" accept="image/gif,image/jpeg,image/x-png">
</span>
<a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">提交</button>
</div>
</div>
</form>
<script>
$(".btn-success").click(function () {
var name = $('input[name="name"]').val();
if(name =='' || name == undefined){
alert('名称不能为空..')
return false;
}
$('form[role="form"]').submit();
})
$('select[name="type"]').change(function () {
var value = $('select[name="type"] option:selected').val();
if(value==2){
$('#dir_name').attr('style','display:block;');
}else{
$('#dir_name').attr('style','display:none;');
}
})
</script>