layui upload文件上传获取不到动态select选中的值

本文介绍了一个使用layui框架实现的多文件上传组件案例,该组件能够携带动态select控件的选中值进行文件上传,并展示了如何通过JavaScript监听select变化并设置上传前的数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html select 下拉框显示

<div class="layui-input-inline" >
<select name="categoryId" id="categoryId" style="height:38px;">
       <option selected="selected" ></option>
        <option value="1">222</option>
        <option value="2">444</option>
        <option value="3">555</option>
        <option value="4">666</option>
</select>
 </div>

layui 多文件上传并携带动态select选中参数值

layui.use('upload', function(){
    	  var $=layui.jquery
    	  ,upload = layui.upload;
    	  //多文件列表示例
    	  var demoListView=$('#demoList')
    	  ,uploadListIns=upload.render({
    	    elem: '#testList'
    	    ,url: ''
    	    ,before: function(obj){
                this.data={"categoryId":$("#categoryId").val()};
            }
    	    ,accept: 'file'
    	    ,multiple: true
    	    ,auto: false
    	    ,bindAction: '#testListAction'
    	    ,choose: function(obj){   
    	      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
    	      //读取本地文件
    	      obj.preview(function(index, file, result){
    	        var tr = $(['<tr id="upload-'+ index +'">'
    	          ,'<td>'+ file.name +'</td>'
    	          ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
    	          ,'<td>等待上传</td>'
    	          ,'<td>'
    	            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
    	            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
    	          ,'</td>'
    	        ,'</tr>'].join(''));
    	        
    	        //单个重传
    	        tr.find('.demo-reload').on('click', function(){
    	          obj.upload(index, file);
    	        });
    	        
    	        //删除
    	        tr.find('.demo-delete').on('click', function(){
    	          delete files[index]; //删除对应的文件
    	          tr.remove();
    	          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
    	        });
    	        
    	        demoListView.append(tr);
    	      });
    	    }
    	    ,done:function(res,index, upload){
    	    	 console.log(res);//服务器响应信息
    	         console.log(index);//当前文件的索引
    	         console.log(upload);//重新上传的方法    	        
    	      if(res.code==200){ //上传成功
    	        var tr = demoListView.find('tr#upload-'+ index)
    	        ,tds = tr.children();
    	        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
    	        tds.eq(3).html(''); //清空操作
    	        return delete this.files[index]; //删除文件队列已经上传成功的文件
    	      }
    	      this.error(index, upload);
    	    }
    	    ,error:function(index,upload){
    	    	console.log(index);//当前文件的索引
    	        console.log(upload);//重新上传的方法
    	      var tr = demoListView.find('tr#upload-'+ index)
    	      ,tds = tr.children();
    	      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
    	      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    	    }
    	  });
    	});

获取select选中的值关键代码

,before: function(obj){
              this.data={"categoryId":$("#categoryId").val()};
  }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值