文件上传 upload

提问 未结 5 70
seven_s
seven_s 4天前
悬赏:20飞吻
版本:layui 2.4.5 浏览器:chrome
请问 N个上传按钮 我改怎么做?
实例化多个上传,还是实例化一个,使用全局变量(objectId)?
var uploadTpl = upload.render({
elem: '#uploadBtn' //绑定元素
,url: '/rest/file/saveFile/' //上传接口
,accept: 'file'
,exts: "xls|xlsx" // 即代表只允许上传文件格式
,acceptMime: '.xls,.xlsx' //,筛选出的文件类型
,data:{
”objectId":objectId,
"encoding":$("#encoding").val()
}
,done: function(res){
//上传完毕回调
layer.msg(res.msg);
}
,error: function(){
//请求异常回调
}
});

回帖
  • 我的方法是给要实例化的上传元素给相同的类名 和不同的id 然后循环这个类名的元素 取这个元素的id 进行实例化
    //html
    <div class="layui-upload-drag " id="logo" style="width:70px; height:70px;">
    <img src="" alt="">
    <a href="javascript:" class="del-btn1"></a>
    <i class="layui-icon" style="display: none; margin-top:13px;"></i>
    </div>
    //js
    function initUpload(uploadUrl, flag) {
    var upload = layui.upload;
    var _csrf = getCsrf();
    //循环实例化
    var $upload = $('.layui-upload-drag');
    $upload.each(function () {
    var id = $(this).attr('id');
    //拖拽上传
    upload.render({
    elem: '#' + id,
    url: uploadUrl,
    data: {
    '_csrf': _csrf
    },
    done: function (res) {
    this.item.children('img,br,a').remove();
    var str = '<img src="' + res.data.server_name + res.data.file_path + '"> <br> <a href="javascript:;" class="del-btn1"></a>';
    this.item.siblings('.hidden-input').val(res.data.file_path);
    this.item.children().hide();
    this.item.append(str);
    if (1 == flag) {
    $('#drog-box').css({
    "background": "url('" + res.data.server_name + res.data.file_path + "') no-repeat",
    'background-size': "100% 100%"
    });
    }
    }
    });
    });
    //删除按钮阻止父级点击事件
    $('.layui-upload-drag').on('click', '.del-btn1', function (e) {
    $(this).parent().siblings('.hidden-input').val('');
    $(this).siblings().show();
    $(this).siblings('img,br').remove();
    $(this).remove();
    e.stopPropagation();
    }).on('click', 'img', function (e) {
    e.stopPropagation();
    });
    }
    0 回复
  • seven_s
    4天前
    @孤独丶 循环 就是实例化多个上传控件了,会不会有性能问题?如果一页有100条数据
    0 回复
  • 那你试试就知道了啊
    0 回复
  • seven_s
    4天前
    @孤独丶 [嘻嘻] ,我刚刚研究出来了, 还是要谢谢, 楼下我把方案贴出来
    0 回复
  • seven_s
    4天前

    1.文件上传按钮,指定class = file-upload,指定数据lay-data 的 objectId
    <a href=\"#\" class=\"iconfont fa fa-upload table_icon file-upload \" lay-data=\"{objectId: '"+ d.objectId+"'}\" title=\"上传文件\" /a>
    2. 初始化配置,使用before 给 data赋值,把lay-data中的数据 给到 参数中$(this)[0].data.objectId = $(this)[0].objectId ,这样 点击每一个上传按钮 对应的Objectid 都会发生改变

    var upload = layui.upload;
    var uploadTpl = upload.render({
    elem: '.file-upload' //绑定元素
    ,url: '/rest/file/saveFile/' //上传接口
    ,accept: 'file'
    ,bindAction:".file-upload"
    ,exts: "xls|xlsx" // 即代表只允许上传文件格式
    ,acceptMime: '.xls,.xlsx' //,筛选出的文件类型
    ,data:{}
    ,done: function(res){

    }
    ,before:function(){
    $(this)[0].data.objectId = $(this)[0].objectId ;
    }

    ,error: function(){
    //请求异常回调
    }
    });
    0 回复