如何用layui实现图片上传?

layui上传功能的实现:

一、前往官网下载layui的框架

打开html文件,引用其中的 layui.css 和 layui.js

二、调用前端的html代码,设置id值。

<div class="layui-upload upload">
            <button type="button" class="layui-form-label" id="upload">上传图片</button>
             <input  class="layui-upload-file" type="file" accept="" name="file">
             <div class="layui-upload-list">
                   <img class="layui-upload-img" id="demo1">
                   <p id="demoText"></p>
             </div>
</div>
<script>
    layui.use(['laypage', 'layer', 'upload'], function () {
        var laypage = layui.laypage  //设置配置环境
            , layer = layui.layer
            , upload = layui.upload

     
        //上传图片
        var uploadInst = upload.render({
            elem: '#upload'
            , url: '/upload/' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> 
                <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
 }); 
</script>

推荐文章
layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui框架属于前端还是后端?

layui框架属于前端还是后端?layui框架属于前端,是前端框架。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,

怎么修改layui提示样式?

一直以来都认为layui挺好看的,包括它的弹层组件layer,不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题;它的默认样式是这样的:因为我页面布局的关系,弹框挡住了按钮,所以我决定

vue.js和layui一样么?

vue.jsVue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,方

layui框架学习之flow组件常见用法总结

该模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:一、信息流加载信息流加载的核心方法时flow.load(optio

layui open怎么更改按钮的颜色?

layuiopen中可以使用skin来设置按钮颜色。skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui开源么?

layui是免费开源的,layui是开源的模块化前端UI框架,而layAdmin和layIm是付费授权的。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织

前端layui框架快速上手

一、介绍在使用layui之前,我们先要了解一下layui是什么?我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

浅谈Layui如何实现input输入和选择

Layui实现input输入和选择的方法:HTML代码: 移交单位* 111 222 333 444 555 其中input的几个style样式简单说一下。position:absolu

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/

layui如何自定义字体图标?(图文介绍)

layui的图标取自于阿里巴巴的矢量图标库Iconfont第一步,通过浏览器打开http://iconfont.cn/,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui是什么时候开发的?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui的好处是什么?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()