layui upload 额外参数上传

简介: layui 2.0.x 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/



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

目录
相关文章
|
6月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
235 0
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
840 0
|
6月前
原生input实现上传文件
原生input实现上传文件
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
653 0
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3757 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
前端开发 JavaScript 应用服务中间件
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
|
前端开发 JavaScript
Bootstrap File Input,最好用的文件上传组件(1)
Bootstrap File Input,最好用的文件上传组件
632 0
Bootstrap File Input,最好用的文件上传组件(1)
|
3月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
53 0
|
4月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1339 0
|
6月前
|
前端开发
elementui_上传组件方法自定义(formData)
elementui_上传组件方法自定义(formData)
80 1