图片/文件上传 - layui.upload

最新推荐文章于 2024-06-22 14:05:55 发布

Les_Wu

最新推荐文章于 2024-06-22 14:05:55 发布

阅读量9.2k

点赞数 3

分类专栏： javascript 文章标签：图片上传 layui图片上传

本文链接：https://blog.csdn.net/qq_38490778/article/details/79729647

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片/文件上传 - layui.upload

普通上传文件是借助 type="file" 的 input 标签来完成的, 这太low了

本文是利用 layui 做两种情况下的图片上传服务器端是ThinkPHP3.2

实例一: (点击上传即保存数据库)

upload.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/Public/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1" width="150px">
  </div>
</div>   
          
<script src="/Public/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{:U("Api/index/upload")}'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //上传成功
        return layer.msg(res.msg,{icon: res.status,time: 2000});

    }
  });
   
});
</script>

</body>
</html>

upload()方法

public function upload()
    {
    	if(IS_AJAX){
    		$upload = new \Think\Upload();// 实例化上传类
            $upload->maxSize   =     1024*1024 ;// 设置附件上传大小
            $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 
            $upload->rootPath  =     './Public/'; // 设置附件上传根目录
            $upload->savePath  =     'img/'; // 设置附件上传（子）目录
            $info   =   $upload->upload();
            if(!$info) {// 上传错误提示错误信息
                $data['status']  = 5;
                $data['msg'] = $upload->getError();
            }else{// 上传成功
                $data['url'] = "/".$upload->rootPath.$info['file']['savepath'].$info['file']['savename'];
                $up_model=D('uploads');
                $up_model->url=$data['url'];
                if($up_model->add()){
                    $data['status']  = 1;
                    $data['msg'] = "上传成功";
                }else{
                    $data['status']  = 2;
                    $data['msg'] = "服务器繁忙";
                }
            }
            $this->ajaxReturn($data);
    	}
    	$this->display();
    }

实例二: (先点击选择文件, 再与其他表单数据一起提交)

uploads.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/Public/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
          
 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
</div>
<div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1" width="150px">
</div>
<button type="button" class="layui-btn" id="test9">开始上传</button>
 
          
<script src="/Public/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload; 
  
  //选完文件后不自动上传
  upload.render({
    elem: '#test8'
    ,url: '{:U("Api/index/upload")}'
    ,auto: false
    //,multiple: true
    ,choose: function(obj){
      console.log(obj)
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,bindAction: '#test9'
    ,done: function(res){
      console.log(res)
      return layer.msg(res.msg,{icon: res.status,time: 2000});
    }
  });

});
</script>

</body>
</html>

实测有效:

layui 文件上传官方文档: http://www.layui.com/doc/modules/upload.html

Les_Wu

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
图片/文件上传 - layui.upload

图片/文件上传 - layui.upload普通上传文件是借助 type="file" 的 input 标签来完成的, 这太low了本文是利用 layui 做两种情况下的图片上传服务器端是ThinkPHP3.2实例一: (点击上传即保存数据库)upload.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charse...
复制链接

扫一扫