端代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>upload模块快速使用</title>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">

</head>

<body>

    <button type="button" class="layui-btn" id="test1">

      <i class="layui-icon"></i>上传图片

    </button>

    <div class="layui-upload-list">

        <img class="layui-upload-img" width="100px" height="100px" id="demo1">

        <p id="demoText"></p>

    </div>

    <script src="/layui/layui.js"></script>

    <script>

        layui.use('upload', function(){

            var $ = layui.jquery

            ,layer = layui.layer

            ,upload = layui.upload;

            var uploadInst = upload.render({

                elem:'#test1'

                ,url:'/index/upload/upload'

                ,accept:'file'  // 允许上传的文件类型

                ,auto:true // 自动上传

                ,before:function (obj) {

                    // console.log(obj);

                    // 预览

                    obj.preview(function(index,file,result) {

                        // console.log(file.name);    //图片地址

                        // console.log(file.type);    //图片格式

                        // console.log(file.size);    //图片大小

                        // console.log(file);    //图片地址

                        $('#demo1').attr('src',result); //图片链接 base64

                    });

                }

                // 上传成功回调

                ,done:function(res) {

                    // console.log(upload);

                    console.log(res);

                    if (res.code == 0) {

                        layer.msg(res.msg);

                    }else{

                        layer.msg(res.msg);

                    }

                }

                // 上传失败回调

                ,error:function(index,upload) {

                    // 上传失败

                }

            });

        })

    </script>

</body>

</html>

php后台：

public function upload()

    {

        $file = request()->file('file');

        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

        if($info) {

            $data['code'] = 0;

            $data['msg'] = $info->getSaveName();

        }else{

            $data['code'] = 1;

            $data['msg'] = $file->getError();

        }

            return json($data);

    }

php+layui实现图片上传与预览的更多相关文章

  1. layui 实现图片上传和预览

    [学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面 前台实现 <#--图片名--><input id="fileName" type=&qu ...

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

    html代码 <div class="layui-upload"> <button type="button" class="lay ...

  3. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  5. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  6. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  7. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. 多个JDK下TOMCAT运行设置

    当OS中含有多个JDK版本时,设置TOMCAT下JAVA环境变量信息的办法: 1.在setclasspath.bat或者setclasspath.sh下设置 set JAVA_HOME=d:\java ...

  2. 网易免费企业邮箱Foxmail设置方法

    网易免费企业邮箱Foxmail7.0设置方法 第一步:启动 Foxmail 邮件客户端,点击工具->账号管理,弹出如下页面. 点击新建,如下: 填写自己企业邮箱账号,然后下一步,邮箱类型选择PO ...

  3. com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server

    出现上述bug的原因如下: 在默认设置下,Eureka服务注册中心也会将自己作为客户端来尝试注册它自己,所以我们需要禁用它的客户端注册行为. 禁止方式如下:在application.propertie ...

  4. MySQL字符集的设置

    Notice:文章基于ubuntu系统而写 1.关于MySQL字符集 MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式( ...

  5. JavaScript Boolean( new Boolean(false) ) 其实是true

    Boolean类型是JavaScript原始数据类型(primitive type)之一:常用来表示 真或假,是或否:这个类型只有两个值:保留字true和false 一般用于控制语句:如下 if(Bo ...

  6. python线程死锁与递归锁

    死锁现象 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去. 此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待 ...

  7. Alpha冲刺(3/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  8. CentOS6.8 安装 Oracle11.2.0.4

    1. 安装操作系统 安装的时候选择中文+英文支持 注意分区: swap sda盘做系统盘 sdb盘做数据盘 配置完成后的服务器分区路径信息: [root@dbserver ~]# df -h File ...

  9. 【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏

    display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...

  10. Redis随笔（五）Jedis、jedisCluster的使用

    1.Jedis客户端 https://redis.io/clients 2.Jedis源码包与使用介绍 https://github.com/xetorthio/jedis 3.项目中使用 通过mav ...