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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
canvas多重阴影发光效果实现
Apr 20 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和ACCESS写聊天室(八)
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
php-app开发接口加密详解
2018/04/18 PHP
javascript globalStorage类代码
2009/06/04 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
通过C++学习Python
2015/01/20 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python学习小技巧总结
2018/06/10 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
本科毕业生自我鉴定
2013/11/02 职场文书
英语导游词
2015/02/13 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android