layui 实现表单和文件上传一起传到后台的例子


Posted in Javascript onSeptember 16, 2019

HTML代码

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">尾灯名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入尾灯名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn" id="upload">
        <i class="layui-icon"></i>上传图标
      </button>
      <br><br>
      <div style="width:200px;height:200px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
        <img style="max-width: 200px;max-height:200px;" id="preview">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" id="commit" onclick="return false">立即提交</button>
    </div>
  </div>
</form>

JavaScript代码

<script>
  layui.use(['form', 'layer', 'upload'], function () {
    var layer = layui.layer;
    var upload = layui.upload;
    var $ = layui.jquery;

    upload.render({
      elem: '#upload',
      url: '{:U("addTL")}',
      auto: false,//选择文件后不自动上传
      bindAction: '#commit',
      //上传前的回调
      before: function () {
        this.data = {
          name: $('input[name="name"]').val()
        }
      },
      //选择文件后的回调
      choose: function (obj) {
        obj.preview(function (index, file, result) {
          $('#preview').attr('src', result);
        })
      },
      //操作成功的回调
      done: function (res, index, upload) {
        var code = res.code === 0 ? 1 : 2;
        layer.alert(res.msg, {icon: code}, function () {
          parent.window.location.reload();
        })
      },
      //上传错误回调
      error: function (index, upload) {
        layer.alert('上传失败!' + index);
      }
    });
  })
</script>

以上这篇layui 实现表单和文件上传一起传到后台的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
layui使用templet格式化表格数据的方法
Sep 16 #Javascript
layui监听单元格编辑前后交互的例子
Sep 16 #Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 #Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 #Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Python实现控制台中的进度条功能代码
2017/12/22 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python如何实现视频转代码视频
2019/06/17 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
妇产医师自荐信
2014/01/29 职场文书
大学生毕业鉴定
2014/01/31 职场文书
消防安全汇报材料
2014/02/08 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
详解Python requests模块
2021/06/21 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
python实现层次聚类的方法
2021/11/01 Python