如何在上传组件的choose回调中获取触发选择的按钮元素

提问 已结 10 717
intuition
intuition 2018-4-9
悬赏:20飞吻
版本:layui 2.2.6 浏览器:
界面中需要两个选择文件的按钮,共同触发上传按钮,但是在choose中希望能够区分到底 是哪个选择文件按钮选择的文件,this.item在choose回调函数中似乎无法使用,急求帮忙解决,谢谢!
回帖
  • TangHanF
    2018-4-9
    将你上述代码的choose回调替换为以下内容(逻辑基本没动,关键点我注释说明了)

    , choose: function (obj) {
    var that=this;// 重新指定对象,防止下面调用时出现对象不一致问题

    var files = obj.pushFile(); //将每次选择的文件追加到文件队列
    obj.preview(function (index, file, result) {
    debugger
    //$("#sFile1").html(file.name);// 这个地方不能这么写,就算你说的this.item能区分,但是每次赋值都是sFile1,不行啊

    /* that.item可以获取到当前点击按钮对象
    * 正常思路的话按照DOM结构分析,当前按钮元素后面的元素应该是显示文件名的<span>标签,然后我们为当前按钮后面的span标签设置文本内容即可。
    * 但是实际上我们利用jquery的next方法获取到的是一个隐藏的input,因此直接next是定位不到想要的span标签的;
    * 于是决定用nextAll方法看看后面到底都啥,于是利用$(that.item).nextAll()获取到后面同类所有元素集合,发现span在集合索引值为1的位置,
    * 最后代码就是:
    * */
    $($(that.item).nextAll()[1]).html(file.name);// 利用jquery定位元素的方式可以再优化,请自行优化。此处仅仅是实现功能,尚未优化
    });
    }
    0 回复
  • 请粘贴下代码
    0 回复
  • intuition
    2018-4-9
    @踏雪无痕470

    <div class="layui-form-item">
    <label for="L_repass" class="layui-form-label">
    附件
    </label>
    <div class="layui-input-block">
    <button class="layui-btn demoMore" id="test8" type="button">选择文件</button>
    <span class="x-red" id="sFile1"></span>
    </div>

    </div>
    <div class="layui-form-item">
    <label for="L_repass" class="layui-form-label">
    预览附件
    </label>
    <div class="layui-input-block">
    <button class="layui-btn demoMore" id="test10" type="button">选择文件</button>
    <span class="x-red" id="sFile2"></span>

    </div>

    </div>
    <div class="layui-form-item">
    <label for="L_repass" class="layui-form-label">
    </label>
    <button class="layui-btn" id="test9" type="button">开始上传</button>
    </div>
    layui.use('upload', function () {
    var $ = layui.jquery, upload = layui.upload;

    upload.render({
    elem: '.demoMore'
    , url: 'FileUpload.ashx'
    , auto: false
    , data: { desc: function () {
    return $("#desc").val();
    }
    }
    , before: function () {
    alert($(this.item[0]).attr('id'));
    }
    , choose: function (obj) {
    var files = obj.pushFile(); //将每次选择的文件追加到文件队列
    alert(obj.length);
    obj.preview(function (index, file, result) {

    $("#sFile1").html(file.name);

    });
    }
    , multiple: true
    , number: 2
    , accept: 'file'
    , bindAction: '#test9'
    , done: function (res) {
    console.log(res)
    }
    });
    });
    想在choose回调中区分到底点的是哪个选择按钮,把预览文件名显示在相应按钮后边
    0 回复
  • TangHanF
    2018-4-9
    @intuition 我测试了一下,可以实现你的功能,看一下是不是这样?
    0 回复
  • intuition
    2018-4-9
    @TangHanF 是的!就是这样的。可否分享一下代码?谢谢!
    0 回复
  • TangHanF
    2018-4-9
    @intuition 正在给你整理文档呢 稍等
    0 回复
  • TangHanF
    2018-4-9
    0 回复
  • TangHanF
    2018-4-9
    参考:http://fly.layui.com/jie/24673/
    这个帖子里面我会在GitHub上不断完善相关内容
    0 回复
  • intuition
    2018-4-9
    @TangHanF 可否留个联系方式?还有一个刚才问题的后续问题。。。
    0 回复
  • TangHanF
    2018-4-9
    @intuition 微信:g992470084
    0 回复