layui上传图片

<?php
if ($_POST) {
  $descs = $_POST[‘descs‘];
  $uname = $_POST[‘img‘];       隐藏域的name名
  $conn = new mysqli(‘localhost‘, ‘root‘, ‘root‘, ‘qiye‘);
  $sql = "insert into product(descs,img) values (‘$descs‘,‘$uname‘)";
  $res = $conn->query($sql);
}
?>
<form class="layui-form layui-card-body" action="" method="post" enctype="multipart/form-data">
          <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <img src=""  id="imgs">
          <input type="hidden" name="img" id="imgg" value="">   hidden隐藏域
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
              <textarea name="descs" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
<script>
layui.use(‘upload‘, function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: ‘#test1‘ //绑定元素
    ,url: ‘/upload.php‘ //上传接口    地址根目录
    ,field:‘img‘
    ,done: function(res){
      console.log(res);
      document.getElementById(‘imgs‘).src=res.msg;
      document.getElementById(‘imgg‘).value=res.msg;
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>

layui上传图片

上一篇:Hastlayer-SDK 转换.NET 程序集至 FPGA 硬件(现场可编程逻辑门阵列)


下一篇:5G对web前端发展的影响