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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 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
实现树状结构的两种方法
2006/10/09 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python实现二分查找算法
2020/09/18 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
诉讼代理人授权委托书
2014/04/08 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
西安大雁塔导游词
2015/02/10 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2015年教师节感言
2015/08/03 职场文书
公司车队管理制度
2015/08/04 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers