layui 实现表单和文件上传一起传到后台的例子

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 实现表单和文件上传一起传到后台的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

    本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: <div class="layui-form-item" id="upload_file"> <div class="layui-input-block" style="width: 300px;"> <input t

  • layui表单提交到后台自动封装到实体类的方法

    第一次用layui,正在摸索中,今天在学习layui的时候在项目中看到一个表单提交,表单的数据传到后台是怎么自动封装到实体类里面的呢? 1.表单中的每一项的name属性值,必须和你所封装的实体中的属性名字一一对应,如果不相同就无法封装. 2.假如你的实体有5个属性,而需要前台输入的只有4个.(假如还有一个属性是id,这个不用输入,由后台给出).封装结束后,这个id属性的值就是null,你只需要自己再给它赋值就好了. 需要用到的包 jsp中的表单: 表单中的name属性的名称对应实体类的属性名称,

  • 解决Layui 表单提交数据为空的问题

    坑的外观 最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla

  • layui 实现表单和文件上传一起传到后台的例子

    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="na

  • Ajax提交Form表单及文件上传的实例代码

    前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f

  • JS实现表单多文件上传样式美化支持选中文件后删除相关项

    JS实现表单多文件上传样式美化支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

  • Node层模拟实现multipart表单的文件上传示例

    Node层模拟实现multipart表单的文件上传示例

    有时候就是有这样的需求,Nodejs做webserver,从浏览器端上传文件到后端服务器,Node层只是做一个数据中转,如果在这个过程中,Node webserver需要对数据进行适当加工,然后再Post到后端,那么就得在Node层模拟文件上传了. 首先,通过浏览器上传文件,PostData格式是长着个样子的: 屏幕快照 2014-11-22 下午9.18.45.png 如图,每一组数据其实就是用"-----WebkitFormBoundary....."分隔开的,最后再用这个分隔符结

  • JQuery异步提交表单与文件上传功能示例

    JQuery异步提交表单与文件上传功能示例

    本文实例讲述了JQuery异步提交表单与文件上传功能.分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件. 示例如下: index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"

  • php中关于普通表单多文件上传的处理方法

    然而有些情况只需要传递几个文件,而且文件体积并不太大,这种情况下使用组件则有点牛刀杀鸡的感觉,通过html自带的<input type="file">表单就可以实现需要的功能,关键在于后台接收程序的处理. php处理上传做的很方便,上传文件的信息通过服务器自动处理到$_FILES数组中,开发者只需要使用的内置处理函数简单操作就可以啦.ASP开发者则没有这么幸运,官方并没有提供直接的处理方法,需要开发者自己设计,这时就需要开发者了解IIS对enctype="mult

  • 全面解析node 表单的图片上传

    node 全面解析表单的图片上传 ,multiparty解析与内容类型的HTTP请求multipart/form-data,也被称为文件上传. multiparty安装 npm install multiparty html代码 <form action="/api/uppic" method="post" > <input type="file" name="pic" > <input type

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • java通过模拟post方式提交表单实现图片上传功能实例

    本文实例讲述了java通过模拟post方式提交表单实现图片上传功能.分享给大家供大家参考,具体如下: 模拟表单html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="tex

  • 解决layui table表单提示数据接口请求异常的问题

    问题一:直接拿别人的文件放在本地打开 如下图 原因:这是提示"交叉源请求仅支持协议方案:HTTP.数据.Chrome.Chrome扩展.HTTPS." 也就是你不能用本地文件打开,本地打开是file:///C:/Users/Administrator/Desktop/git/layui_table1.html 可以在本地服务器上展示没有问题 http://localhost/git/layui_table1.html 问题二:返回数据格式不符合要求(经常是这样的) 输出格式为 { &q

随机推荐