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在一段文字中的光标处插入其他文字
Aug 26 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
德生1994机评
2021/03/02 无线电
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php微信支付之APP支付方法
2015/03/04 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
pytorch 修改预训练model实例
2020/01/18 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python如何爬取动态网站
2020/09/09 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
面试后的英文感谢信
2014/02/01 职场文书
组织鉴定材料
2014/06/02 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers