ThinkPHP5+Layui实现图片上传加预览

朴灿烈づ我的快乐病毒、 2022-06-06 08:42 208阅读 0赞

<label class="layui-form-label">图片</label>
    <a class="layui-btn" id="image" style="float: left;"><i class="layui-icon"></i>上传图片</a>
    <div class="layui-input-block" style="margin-left: 220px;">
      <input type="text" name="img" value="{$tptc.img}" class="layui-input" style="position: absolute;left: 0;top: 0;">
    </div>
    </div>
    
    <div class="layui-form-item">
      <img style="margin-left: 110px;" id="img" src="{$tptc.img}">
    </div>
    
    <script>
    layui.use('upload',function(){
      var upload = layui.upload,
      jq = layui.jquery;
      upload.render({
    	url: '{:url("index/upload")}'
    	,elem:'#image'
    	,ext: 'jpg|png|gif'
    	,area: ['500', '500px']
    	,before: function(input){
    	loading = layer.load(2, {
    	shade: [0.2,'#000']
    	});
    	}
    	,done: function(res){
    	layer.close(loading);
    	jq('input[name=img]').val(res.path);
    	img.src = ""+res.path;
    	layer.msg(res.msg, {icon: 1, time: 1000});
    	}
      }); 
    
    })
    </script>

public function upload(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
    	// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
    	$path =  $info->getExtension();
            // 成功上传后 返回上传信息
    	return json(array('state'=>1,'path'=>$path));
        }else{
            // 上传失败返回错误信息
    	return json(array('state'=>0,'errmsg'=>'上传失败'));
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 73 阅读

相关 ThinkPHP5+Layui实现图片上传加预览

<label class="layui-form-label">图片</label> <a class="layui-btn" id="image" style

朴灿烈づ我的快乐病毒、/ 2022年06月06日 08:42/ 0 赞/ 209 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 529 阅读

相关 node+layui实现图片上传预览和删除功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></titl

浅浅的花香味﹌/ 2022年05月28日 20:28/ 0 赞/ 335 阅读

相关关于layui文件上传-- 多图片上传预览

<html> <head> <meta charset='UTF-8'> <meta name='Author'

忘是亡心i/ 2022年05月27日 01:17/ 0 赞/ 427 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 883 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 644 阅读

相关 js thinkphp5 图片上传可预览可删除

HTML部分 <style> .upload_btn{margin-left: 100px; border: none; background-color:

本是古典何须时尚/ 2022年04月18日 03:48/ 0 赞/ 160 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 825 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 861 阅读