扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在使用layui的多图上传时发现没有删除功能
商河ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手
下面附上代码
HTML:
预览图:
CSS:
js:
upload.render({ elem: '#test2' ,url: '' ,multiple: true ,before: function(obj){ layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 }) } ,done: function(res){ layer.close(layer.msg());//关闭上传提示窗口 //上传完毕 $('#uploader-list').append( '' + '' ); } });' + '' + '' + res.data.title + '' + '
$(document).on("mouseenter mouseleave", ".file-iteme", function(event){ if(event.type === "mouseenter"){ //鼠标悬浮 $(this).children(".info").fadeIn("fast"); $(this).children(".handle").fadeIn("fast"); }else if(event.type === "mouseleave") { //鼠标离开 $(this).children(".info").hide(); $(this).children(".handle").hide(); } });
// 删除图片 $(document).on("click", ".file-iteme .handle", function(event){ $(this).parent().remove(); });
thinkphp处理上传文件
public function upload(){ //exit(ROOT_PATH . 'public' . DS . 'uploads'); // 获取表单上传文件 例如上传了001.jpg $file = request()->file('file'); // 移动到框架应用根目录/public/uploads/ 目录下 if($file){ $info = $file->validate(['size'=>2097152,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'); //限定2MB if($info){ $src='./uploads/'.str_replace('\\',"/",$info->getSaveName()); $image = Image::open($src); $image->thumb(750, 750)->save($src);//压缩图片大小 $res['code']=0; $res['msg']='上传成功!'; $res['data']['src']='/uploads/'.str_replace('\\',"/",$info->getSaveName()); $res['data']['title']=$info->getFilename(); }else{ // 上传失败获取错误信息 $res['code']=1; $res['msg']='上传失败!'.$file->getError(); } return $res; } }
以上就是layui多图上传实现删除功能的方法的详细内容,更多请关注创新互联其它相关文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流