使用的是Layui的css样式
h5代码:
<div class="controls need-img">
<p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem">亲!最多可上传4张图片哦。</p>
<div class="add-img" id="upload_img_icon" style="float: left">
</div>
</div>
js代码:
var upurl = "{:url('Index/upload1')}"; //上传图片提交地址
layui.use(['layer','upload'], function(){
var layer = layui.layer;
var upload = layui.upload;
upload.render({ //上传图片
elem: '#upload_img_icon',
url: upurl,
multiple: true, //是否允许多文件上传。设置 true即可开启。不支持ie8/9
auto:true,//自动上传
before: function(obj) {
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
},
done: function(res) {
layer.close(layer.msg('上传成功!'));//下面是把上传以后的图片显示出来
var html='<div class="img" style="float: left">'+
'<i class="layui-icon del_img" style="position: relative;right: -1.5rem;top: -0.45rem;">ဆ</i>'+
'<img class="wz_img" src="'+res.data+'" alt="" style="width: 1.5rem;height:1.5rem;margin:0.26rem 0 0.26rem 0rem;">'+
'</div>';
$('.need-img').append(html);
// $('.upload-img-box').append(
// '<dd class="upload-icon-img"> <div class="upload-pre-item" style="width:120px;height:100px;float:left;margin-left:15px;"> <i onclick="deleteImg($(this))" class="layui-icon">X</i> <img src="' + res.data + '" class="img" style="width:100%;"> <input type="hidden" class="asd" name="case_images[]" value="' + res.data + '" /> </div></dd>');
}
,error: function(){
layer.msg('上传错误!');
}
});
});
php代码:
//文件上传代码--带缩率图
private function uploads() {
$params = $this->request->param();
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$file_path=ROOT_PATH . 'public/uploads/';
$info = $file->move($file_path);
$reubfo = array(); //定义一个返回的数组
if ($info) {
$reubfo['info'] = 1;
$reubfo['savename'] = $info->getSaveName();
$image = \think\Image::open(ROOT_PATH.'public/uploads'.DS.$reubfo['savename']);
$width = $image->width();
$height = $image->height();
$path='sm_file/uploads/'.date('Ymd');
if (!$this->checkPath($path)) {
$reubfo['err'] = '生成缩略图失败';
}
$image->thumb(200,200,1)->save(ROOT_PATH.'public/sm_file/uploads'.DS.$reubfo['savename']);
} else { // 上传失败获取错误信息
$reubfo['info'] = 0;
$reubfo['err'] = $file->getError();
}
return $reubfo;
}