`
knight_black_bob
  • 浏览: 862721 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

layui upload 额外参数上传

阅读更多

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/



 
 
 谢谢您的赞助,我会做的更好!

0
0
分享到:
评论

相关推荐

    layui一个页面使用多个文件upload上传按钮

    通过以上步骤,你就可以在一个页面上成功地使用layui实现多个文件upload上传按钮。记得根据实际项目需求调整各项配置,并确保服务器端接口与前端交互的正确性。在开发过程中,可以利用layui提供的丰富的API和事件来...

    layui文件上传.rar

    ,data: {} //额外的上传参数 ,progress: function(e, file, that){ //上传进度回调,返回值为当前进度百分比 that.progress(e.percent); } ,done: function(res){ //上传成功后的回调 } ,error: function()...

    layui文件上传控件带更改后数据传值的方法

    layui的文件上传控件是基于`layui-upload`模块的,因此我们需要在layui的初始化代码中加载这个模块。例如: ```html &lt;link rel="stylesheet" href="layui/css/layui.css"&gt; &lt;script src="layui/layui.js"&gt; ...

    layui(1.0.9)文件上传upload,前后端的实例代码

    Layui是一个前端UI框架,支持各种丰富的网页界面组件,其中文件上传功能是网页开发中常见的需求。在Layui 1.0.9版本中,提供了简洁而强大的文件上传组件,使得文件上传的前端操作变得方便快捷。这篇分享文章详细介绍...

    springboot+layui文件上传demo

    在这个"springboot+layui文件上传demo"中,我们将探讨如何结合这两个工具实现文件上传功能。 首先,我们需要在Spring Boot项目中引入相应的依赖。对于文件上传,Spring Boot内建了对MultipartFile的支持,所以我们...

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

    在`layui.upload`的配置中,我们设置了以下关键参数: - `elem: '#upload'`: 指定触发文件上传的元素,即`id="upload"`的按钮。 - `url: '{:U("addTL")}'`: 上传的URL,这里应该是服务器端处理文件上传的接口。 - `...

    实现各种类型文件的多文件上传

    前端利用layui的upload组件提供友好的用户界面,后端借助SpringBoot的`MultipartFile`处理文件上传逻辑,两者协同工作,实现各种类型文件的多文件上传。这种技术方案在实际的Web应用开发中具有广泛的应用价值。

    layui 上传插件 带预览 非自动上传功能的实例(非常实用)

    - `data` 属性提供了上传接口的额外参数。 - `choose` 回调函数用于处理用户选择文件后的逻辑。 - `preview` 回调函数提供了预览上传文件的逻辑,这里通过生成新的`&lt;div&gt;`元素展示了上传文件的预览,并通过监听点击...

    layui扩展上传组件模拟进度条的方法

    `data`对象用于传递额外的参数,如`upgradeType`,这个参数会随文件一起发送到服务器。 最后,我们注意到代码中定义了一个名为`timer`的变量,这通常用于定时更新进度条。在实际的文件上传过程中,我们需要监听...

    异步上传文件

    它可以将文件与额外的参数一起打包,方便通过Ajax或Fetch API发送。 3. **Ajax或Fetch API**:Ajax(异步JavaScript和XML)是实现无刷新通信的常用方法。使用`XMLHttpRequest`对象发送POST请求,将FormData对象作为...

    LayEdit(layer 富文本编辑器使用,包含图片的上传)

    在配置编辑器时,我们可以设置`uploadImage`参数,指定图片上传的URL、额外的请求参数等。当用户点击编辑器内的“图片”按钮时,会触发上传事件。 ```javascript layedit.config({ uploadImage: { url: '/api/...

    layer ui 导入文件之前传入数据的实例

    在`layui.upload.render`的配置中,`done`函数用于处理上传成功后的回调,而`error`函数则用于处理请求错误。`before`函数允许我们在上传文件之前进行一些预处理,比如验证或修改数据。 总的来说,这个实例展示了...

    THINKPHP+JS实现缩放图片式截图的实现

    此外,THINKPHP框架可能需要额外的配置和依赖,例如,`Upload`类的使用,意味着需要配置文件上传的相关设置。 总的来说,THINKPHP+JS实现缩放图片式截图的实现涉及了客户端与服务器端的交互,利用PHP的图像处理能力...

Global site tag (gtag.js) - Google Analytics