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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
document.getElementById介绍
2011/09/13 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Pandas中resample方法详解
2019/07/02 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
运动会广播稿400字
2014/01/25 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
湘江北去观后感
2015/06/15 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
vue实现登陆页面开发实践
2022/05/30 Vue.js