插件窝 干货文章 thinkphp5怎么加layui实现图片上传功能

thinkphp5怎么加layui实现图片上传功能

amp 39 gt layui 232    来源:    2024-10-25

网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对不对。

thinkphp5加layui实现图片上传功能(带图片预览)思路,异步传输图片并预览,将异步上传后的值返回表单隐藏域再提交。

1、引入文件

首先,要引入jQuery文件,这是必须的

<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css" rel="external nofollow" >
<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>

2、HTML部分

<form class="layui-form">
<div class="layui-input-inline">
    <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"><i class="layui-icon">&#xe67c;</i>上传图片</button>
    @@##@@  />
    <input type="hidden" name="img" value="{$data.item.img}">
</div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" onclick="save()">保存</button>
        </div>
    </div>
</form>

3、功能实现

<script type="text/javascript">
    layui.use([&#39;form&#39;,&#39;layer&#39;,&#39;upload&#39;],function(){
        $ = layui.jquery;
        var form = layui.form;
        layer = layui.layer;

        var upload = layui.upload;
   
         //执行实例
        var uploadInst = upload.render({
            elem: &#39;#upload_img&#39; //绑定元素
            ,url: &#39;/admins.php/admins/video/upload_img&#39; //上传接口
            ,accept:&#39;images&#39;
            ,done: function(res){
              //上传完毕回调
              $(&#39;#pre_img&#39;).attr(&#39;src&#39;,res.msg);
              $(&#39;input[name="img"]&#39;).val(res.msg);
            }
            ,error: function(){
              //请求异常回调
            }
        });
    });

    // 保存
    function save(){
        var title = $.trim($(&#39;input[name="title"]&#39;).val());
        var url = $.trim($(&#39;input[name="url"]&#39;).val());
        if(title == &#39;&#39;){
            layer.msg(&#39;请输入影片名称&#39;,{&#39;icon&#39;:2,&#39;anim&#39;:6});
            return;
        }
        if(url == &#39;&#39;){
            layer.msg(&#39;请输入影片地址&#39;,{&#39;icon&#39;:2,&#39;anim&#39;:6});
            return;
        }
        $.post(&#39;/admins.php/admins/video/save&#39;,$(&#39;form&#39;).serialize(),function(res){
            if(res.code>0){
                layer.msg(res.msg,{&#39;icon&#39;:2,&#39;anim&#39;:2});
            }else{
                layer.msg(res.msg,{&#39;icon&#39;:1});
                setTimeout(function(){parent.window.location.reload();},1000);
            }
        },&#39;json&#39;);
    }
</script>

4、后台处理

图片上传

public function upload_img(){
    $file = request()->file(&#39;file&#39;);
    if($file==null){
        exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;没有文件上传&#39;)));
    }
    $info = $file->move(ROOT_PATH.&#39;public&#39;.DS.&#39;uploads&#39;);
    $ext = ($info->getExtension());
    if(!in_array($ext,array(&#39;jpg&#39;,&#39;jpeg&#39;,&#39;gif&#39;,&#39;png&#39;))){
        exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;文件格式不支持&#39;)));
    }
    $img = &#39;/uploads/&#39;.$info->getSaveName();
    exit(json_encode(array(&#39;code&#39;=>0,&#39;msg&#39;=>$img)));
}

保存内容

public function save(){
    $id = (int)input(&#39;post.id&#39;);
    $data[&#39;title&#39;] = trim(input(&#39;post.title&#39;));
    $data[&#39;channel_id&#39;] = (int)input(&#39;post.channel_id&#39;);
    $data[&#39;charge_id&#39;] = (int)input(&#39;post.charge_id&#39;);
    $data[&#39;area_id&#39;] = (int)input(&#39;post.area_id&#39;);
    $data[&#39;img&#39;] = trim(input(&#39;post.img&#39;));
    $data[&#39;url&#39;] = trim(input(&#39;post.url&#39;));
    $data[&#39;keywords&#39;] = trim(input(&#39;post.keywords&#39;));
    $data[&#39;desc&#39;] = trim(input(&#39;post.desc&#39;));
    $data[&#39;status&#39;] = (int)input(&#39;post.status&#39;);

    if($data[&#39;title&#39;] == &#39;&#39;){
        exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;影片名称不能为空&#39;)));
    }
    if($data[&#39;url&#39;] == &#39;&#39;){
        exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;影片地址不能为空&#39;)));
    }

    if($id){
        $this->db->table(&#39;video&#39;)->where(array(&#39;id&#39;=>$id))->update($data);
    }else{
        $data[&#39;add_time&#39;] = time();
        $this->db->table(&#39;video&#39;)->insert($data);
    }
    exit(json_encode(array(&#39;code&#39;=>0,&#39;msg&#39;=>&#39;保存成功&#39;)));
}