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

来源:脚本之家  责任编辑:小易  

有表单提交监听那里,可以用AJAX提交,格式为JSON,数据data.field。ajax是一种传

HTML代码

layui的分页会把limit和page(也就是每页条数和当前页,大概是这个名字,具体看layui的

<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>

action直接空,直接用submit按钮,点击不就提交到当前页面了额,<input id=&

JavaScript代码

在table标签的上方,加入这样一组html<div class="demo

<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>

php 把数据导出到excel表格有多种方法,比如使用 phpExcel 等,以下代码是直接通过 h

以上这篇layui 实现表单和文件上传一起传到后台的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

宝石,不过就是一些漂亮的石头。因为它美丽、稀有。才受到世上所有人追捧。想捡和田玉石。就去昆仑山下的和田去碰运气。想捡宝石。就去阿勒泰的可可托海。喜欢碧玉,可到玛纳斯河去找。若要捡玛瑙、化石、金丝玉,新疆很多戈壁沙漠里都有。无论钻石、玉石、宝石、化石。只是一些漂亮的石头而已!自己喜欢就好!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

layui可以表单中可以支持空文件上传吗?

秒传是一种在网盘上常见的“忽略式”上传方式,就是您上传了一个文件名为111.exe,MD5为一个数,有一个网友以前也上传一个叫111.exe,MD5和您上传的文件MD5码一模一样,所以这个文件上传到服务器上的时间就很短了,这是因为别人上传过这个文件,您上传这个文件,服务器上有这个文件了,所以只需要把这个文件复制一份到您的网盘上就可以了。 传到网盘的每个文件,服务器都会校验MD5码。如果这个您上传的文件MD5码与已经存在于服务器里的文件的MD5码相同的话,网盘服务器将会判断成为重复文件,只需要复制副本保存在网盘上即可,无需重新保存,因为有过这个文件,于是很快完成上传任务,并在有人需要下载的时候将原有的该文件的下载地址放出。这样实现了服务器的高效运作。本回答被网友采纳

layui.upload上传文件的同时怎么传递一个参数

在 before 回调里面 执行追加 隐藏input的操作,里面放你的参数 $('.layui-upload-file').after( '<input type="hidden" name="xxxx" value="xxxx" />' );

这种方式只能传递静态参数,对于select的值好像获取不到

c#后台怎么接收layui.upload上传文件

具体:jsp页面:jQuery("#uploadify").uploadify({。。。。buttonText:'SELECT',//ThetexttouseforthebrowsebuttoncheckExisting:false,//Thepathtoaserver-sidescriptthatchecksforexistingfilesontheserverdebug:false,//TurnonswfUploaddebuggingmodefileObjName:'Filedata',//Thenameofthefileobjecttouseinyourserver-sidescriptfileSizeLimit:2048,//ThemaximumsizeofanuploadablefileinKB(AcceptsunitsBKBMBGBifstring,0fornolimit)fileTypeDesc:fileTypeDesc,版本:jquery.uploadify.v2.1.0.min'sizeLimit':2048*1024,jQuery("#uploadify").uploadify({。。。。。'auto':false,'multi':true,'queueSizeLimit':queueSizeLimit,'buttonText':'BROWSE','sizeLimit':2048*1024,本回答被提问者采纳

layui table参数怎么传到后台

用ajax,把参数放到data里,在后台request直接取来用。

layui 后台上传的的图片尺寸太大 显示出来的是原图尺寸 还是咋td里面 怎么变小啊 请教

直接在img 的标签上加宽度和高度,就可以了

  • 本文相关:
  • layui 上传文件_批量导入数据ui的方法
  • layui文件上传实现代码
  • layui 富文本图片上传接口与普通按钮 文件上传接口的例子
  • layui(1.0.9)文件上传upload,前后端的实例代码
  • js仿百度切换皮肤功能(html+css)
  • js实现随机生成10个手机号的方法示例
  • array, array constructor, for in loop, typeof, instanceof
  • easyui form combobox省市区三级联动
  • 在网页里看flash的trace数据的js类
  • js replace替换字符串同时替换多个方法
  • js验证邮件地址格式方法小结
  • avalonjs实现仿微博的图片拖动特效
  • 绝对经典的滑轮新闻显示(javascript+css)实现
  • javascript 小数取整简单实现方式
  • layui可以表单中可以支持空文件上传吗?
  • layui.upload上传文件的同时怎么传递一个参数
  • c#后台怎么接收layui.upload上传文件
  • layui table参数怎么传到后台
  • layui 后台上传的的图片尺寸太大 显示出来的是原图尺寸 还是咋td里面 怎么变小啊 请教
  • 在LayUI表单中,有AJAX方式来提交表单吗?
  • 前台用layui框架实现表格分页,后台用asp.net的问题
  • 如何接收layui上传的信息 php
  • layui数据表格重载怎么往后台传参?
  • 如何接收layui上传excel上传及php处理
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved