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 相关文章推荐
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
小程序实现五星点评效果
Nov 03 Javascript
js实现随机8位验证码
Jul 24 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
吃通javascript正则表达式
Apr 21 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的sso单点登录实现方法
2015/01/08 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
Smarty保留变量用法分析
2016/05/23 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python类的多重继承问题深入分析
2014/11/09 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python如何读写字节数据
2020/08/05 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
班级聚会策划书
2014/01/16 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS