标签:gif == ace style 大小 窗口 isp 预览图 图片
<div class="layui-upload"> <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> 预览图: <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"> </div> </blockquote> </div>
css:
<style type="text/css"> .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; margin-top: -25px; background-color: black; color: white; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; width: 100px; height: 25px; text-align: center; display: none; } .uploader-list .handle { position: relative; background-color: black; color: white; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; width: 100px; text-align: right; height: 18px; margin-bottom: -18px; display: none; } .uploader-list .handle i { margin-right: 5px; } .uploader-list .handle i:hover { cursor: pointer; } .uploader-list .file-iteme { margin: 12px 0 0 15px; padding: 1px; float: left; } </style>
js:
1 upload.render({ 2 3 elem: ‘#test2‘ 4 5 ,url: ‘‘ 6 7 ,multiple: true 8 9 ,before: function(obj){ 10 11 layer.msg(‘图片上传中...‘, { 12 13 icon: 16, 14 15 shade: 0.01, 16 17 time: 0 18 19 }) 20 21 } 22 23 ,done: function(res){ 24 25 layer.close(layer.msg());//关闭上传提示窗口 26 27 //上传完毕 28 29 $(‘#uploader-list‘).append( 30 31 ‘<div id="" class="file-iteme">‘ + 32 33 ‘<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>‘ + 34 35 ‘<img style="width: 100px;height: 100px;" src=‘+ res.data.src +‘>‘ + 36 37 ‘<div class="info">‘ + res.data.title + ‘</div>‘ + 38 39 ‘</div>‘ 40 41 ); 42 43 } 44 45 }); 46 $(document).on("mouseenter mouseleave", ".file-iteme", function(event){ 47 48 if(event.type === "mouseenter"){ 49 50 //鼠标悬浮 51 52 $(this).children(".info").fadeIn("fast"); 53 54 $(this).children(".handle").fadeIn("fast"); 55 56 }else if(event.type === "mouseleave") { 57 58 //鼠标离开 59 60 $(this).children(".info").hide(); 61 62 $(this).children(".handle").hide(); 63 64 } 65 66 }); 67 68 // 删除图片 69 $(document).on("click", ".file-iteme .handle", function(event){ 70 71 $(this).parent().remove(); 72 73 }); 74 //thinkphp处理上传文件: 75 public function upload(){ 76 77 //exit(ROOT_PATH . ‘public‘ . DS . ‘uploads‘); 78 79 // 获取表单上传文件 例如上传了001.jpg 80 81 $file = request()->file(‘file‘); 82 83 // 移动到框架应用根目录/public/uploads/ 目录下 84 85 if($file){ 86 87 $info = $file->validate([‘size‘=>2097152,‘ext‘=>‘jpg,png,gif‘])->move(ROOT_PATH . ‘public‘ . DS . ‘uploads‘); //限定2MB 88 89 if($info){ 90 91 $src=‘./uploads/‘.str_replace(‘\\‘,"/",$info->getSaveName()); 92 93 $image = Image::open($src); 94 95 $image->thumb(750, 750)->save($src);//压缩图片大小 96 97 $res[‘code‘]=0; 98 99 $res[‘msg‘]=‘上传成功!‘; 100 101 $res[‘data‘][‘src‘]=‘/uploads/‘.str_replace(‘\\‘,"/",$info->getSaveName()); 102 103 $res[‘data‘][‘title‘]=$info->getFilename(); 104 105 }else{ 106 107 // 上传失败获取错误信息 108 109 $res[‘code‘]=1; 110 111 $res[‘msg‘]=‘上传失败!‘.$file->getError(); 112 113 } 114 115 return $res; 116 117 } 118 119 }
标签:gif == ace style 大小 窗口 isp 预览图 图片
原文地址:https://www.cnblogs.com/mo3408/p/12205200.html