【教程】使用layui上传图片

最新推荐文章于 2024-06-06 10:27:00 发布

hifhf

最新推荐文章于 2024-06-06 10:27:00 发布

阅读量395

点赞数

文章标签： php javascript js vue java

本文链接：https://blog.csdn.net/hifhf/article/details/107311552

版权

layui版本：v2.2.6

layui的文档只给了使用，但是没有给接口，以下内容给出了接口，各位可以直接拿去使用，有问题欢迎提问

html显示部分，可以在下面的span里添加一个img标签

<span id="img1"></span>
<button type="button" class="layui-btn layui-btn-sm" id="test1">

layui调用

layui.use(['element','upload'], function(){
  var element = layui.element;
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
	elem: '#test1' //绑定元素
	,url: '../inc/upload.php?id='+<?php echo($rstInfo["id"]);?> //上传接口，可以直接传参数id，也可以使用data，具体可查看layui文档	
	,done: function(res){
		console.log(res);
	  //上传完毕回调
	  if(res.errcode==0){
		  document.getElementById('img1').innerHTML= '<a href="../upload/'+res.data.src+'" target="_new"><img src="../upload/'+res.data.src+'" width="180"></a>';
	  }
	}
	,error: function(res){
		console.log(res);
	  //请求异常回调
	}
  });

});

upload.php代码如下

    $id=$_REQUEST["id"];
    include "../inc/i_conn.php"; 
    $lastname=get_extension($_FILES["file"]["name"]);  
    $imgname = time().rand().".".$lastname;.//起个随机文件名
    $tmp = $_FILES["file"]["tmp_name"];
    $size = $_FILES["file"]["size"];   
    //图片尺寸不能超过3M
    if($size==0 || $size/1024/1024>3){
        echo '{  "errcode": 1  ,"msg": "'.$size.'"  ,"data": {    "src": "'.$imgname.'"  }    }';
    }
    else{
        $filepath = getcwd()."../../upload/";        
        $img = "../../upload/".$imgname;
        
        if(move_uploaded_file($tmp,$filepath.$imgname)){  
            //查询原来的图片文件名，并删除
	    $strsql="select pic from pic1 where id=".$id;
	    $rst=$pdo->query($strsql);  
	    $rstInfo=$rst->fetch();
	    $oldimg=$rstInfo["pic"]; 
	    if($oldimg!=""){
	    	unlink ("../upload/".$oldimg); 
	    }
	    //把新文件名更新到数据库
	    $strsql="update pic1 set pic='".$imgname."' where id=".$id;
	    $pdo->exec($strsql);
            //必须返回json格式字符串       
            echo '{  "errcode": 0  ,"msg": "'.$oldimg.'"  ,"data": {    "src": "'.$imgname.'"  }    }';
            
        }
    }
    //获取扩展名
    function get_extension($file) 
    { 
        return pathinfo($file, PATHINFO_EXTENSION); 
    }