layui 2.0.x upload 额外参数上传
<div class="layui-inline" style="margin-top: 5px;"> <label class="layui-form-label">机型</label> <div class="layui-input-block"> <input type="radio" name="type" lay-filter="radio-type" value="0" title="andorid" checked> <input type="radio" name="type" lay-filter="radio-type" value="1" title="iOS" > </div> </div> <div class="layui-inline"> <label class="layui-form-label">版本描述</label> <div class="layui-input-inline"> <input type="text" name="description" id="description" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline" > <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" lay-data="{accept: 'file'}" id="test8">选择文件</button> <button type="button" class="layui-btn" lay-data="{accept: 'file'}" id="test9">开始上传</button> </div> </div>
layui.use(['upload','element','form'], function () { var $ = layui.jquery , form = layui.form ,element = layui.element upload = layui.upload; // console.log(_jsonDate) //选完文件后不自动上传 upload.render({ method: 'post' //,data:_jsonDate ,elem: '#test8' ,exts:'json' ,url: '${ctx}/upload/uploadfile.do' ,auto: false //,multiple: true ,bindAction: '#test9' ,before: function(input){ var data = {}; data.type = $('input:radio:checked').val(); data.description = $('#description').val(); this.data=data; } ,done: function(res){ var html = formatJson(JSON.stringify(res)); // console.log(html); $('#show_json').empty(); $('#show_json').html('<pre class="layui-code">' +html+'</pre>'); },success: function(msg){ } }); });
在 before 前面添加 this.data 即可 (2.0.x)
,before: function(input){ var data = {}; data.type = $('input:radio:checked').val(); data.description = $('#description').val(); this.data=data; }
(1.0.x)
function setdata(input,data){ var item=[]; $.each(data,function(k,v){ item.push('<input type="hidden" name="'+k+'" value="'+v+'">'); }) $(input).after(item.join('')); }
查看 layui upload.js 里面有 1.0.x 这种方法,2.0.x 优化了,不需要 开发者添加 input hidden 了
捐助开发者
在兴趣的驱动下,写一个免费
的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(支持支付宝和微信 以及扣扣群),没钱捧个人场,谢谢各位。
个人主页:http://knight-black-bob.iteye.com/
谢谢您的赞助,我会做的更好!
相关推荐
通过以上步骤,你就可以在一个页面上成功地使用layui实现多个文件upload上传按钮。记得根据实际项目需求调整各项配置,并确保服务器端接口与前端交互的正确性。在开发过程中,可以利用layui提供的丰富的API和事件来...
,data: {} //额外的上传参数 ,progress: function(e, file, that){ //上传进度回调,返回值为当前进度百分比 that.progress(e.percent); } ,done: function(res){ //上传成功后的回调 } ,error: function()...
layui的文件上传控件是基于`layui-upload`模块的,因此我们需要在layui的初始化代码中加载这个模块。例如: ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"> ...
Layui是一个前端UI框架,支持各种丰富的网页界面组件,其中文件上传功能是网页开发中常见的需求。在Layui 1.0.9版本中,提供了简洁而强大的文件上传组件,使得文件上传的前端操作变得方便快捷。这篇分享文章详细介绍...
在这个"springboot+layui文件上传demo"中,我们将探讨如何结合这两个工具实现文件上传功能。 首先,我们需要在Spring Boot项目中引入相应的依赖。对于文件上传,Spring Boot内建了对MultipartFile的支持,所以我们...
在`layui.upload`的配置中,我们设置了以下关键参数: - `elem: '#upload'`: 指定触发文件上传的元素,即`id="upload"`的按钮。 - `url: '{:U("addTL")}'`: 上传的URL,这里应该是服务器端处理文件上传的接口。 - `...
前端利用layui的upload组件提供友好的用户界面,后端借助SpringBoot的`MultipartFile`处理文件上传逻辑,两者协同工作,实现各种类型文件的多文件上传。这种技术方案在实际的Web应用开发中具有广泛的应用价值。
- `data` 属性提供了上传接口的额外参数。 - `choose` 回调函数用于处理用户选择文件后的逻辑。 - `preview` 回调函数提供了预览上传文件的逻辑,这里通过生成新的`<div>`元素展示了上传文件的预览,并通过监听点击...
`data`对象用于传递额外的参数,如`upgradeType`,这个参数会随文件一起发送到服务器。 最后,我们注意到代码中定义了一个名为`timer`的变量,这通常用于定时更新进度条。在实际的文件上传过程中,我们需要监听...
它可以将文件与额外的参数一起打包,方便通过Ajax或Fetch API发送。 3. **Ajax或Fetch API**:Ajax(异步JavaScript和XML)是实现无刷新通信的常用方法。使用`XMLHttpRequest`对象发送POST请求,将FormData对象作为...
在配置编辑器时,我们可以设置`uploadImage`参数,指定图片上传的URL、额外的请求参数等。当用户点击编辑器内的“图片”按钮时,会触发上传事件。 ```javascript layedit.config({ uploadImage: { url: '/api/...
在`layui.upload.render`的配置中,`done`函数用于处理上传成功后的回调,而`error`函数则用于处理请求错误。`before`函数允许我们在上传文件之前进行一些预处理,比如验证或修改数据。 总的来说,这个实例展示了...
此外,THINKPHP框架可能需要额外的配置和依赖,例如,`Upload`类的使用,意味着需要配置文件上传的相关设置。 总的来说,THINKPHP+JS实现缩放图片式截图的实现涉及了客户端与服务器端的交互,利用PHP的图像处理能力...