layui upload附件上传

1.layui upload 动态生成js

// 附件上传
// elemId:上传button, elemFile:文件存放地址
function fileUpload(elemId,elemFile){
    var $ = layui.jquery, upload = layui.upload;
    var allFiles = '';  // 附件存放列表
    var uploadListIns =  upload.render({
        elem: elemId
        ,url: '/upload/'
        ,multiple: true
        ,accept: "file"
        ,choose: function(obj){
            allFiles = obj.pushFile(); console.log(allFiles)
            obj.preview(function(index, file, result){
                file = fileImg($, file);
                var str = '<a class="file" name="'+index+'" href="javascript:;"  title="'+ file.name +'">\
                                <img class="layui-icon" src="'+ file.icon +'"/>\
                                <p>'+ file.name +'</p>\
                                <img class="layui-a layui-del" src="../images/btn_delete.png"/>\
                            </a>';
                var fileHtml = $([str].join(''));
                // 删除
                fileHtml.find('.layui-del').on('click', function () {
                    delete allFiles[index]; console.log(allFiles)
                    fileHtml.remove();
                    uploadListIns.config.elem.next()[0].value = '';
                });
                $(elemId).before(fileHtml);
            });
        }
        ,allDone: function(obj){ //当文件全部被提交后，才触发
            if(obj.total > obj.successful){
                layer.msg("有文件上传失败，暂不更新生产进度，请重试或联系管理员");
            }else {
                layer.msg("更新生产进度");
            }
        }
        ,done: function(res, index, upload){  // 每个文件提交一次触发一次
            if(res.status == "success"){      // 上传成功
                return delete allFiles[index];   // 删除文件队列已经上传成功的文件
            }else{
                layer.msg(res.message);
            }
            this.error(index, upload);
        }
        ,error: function (index, upload) {
            // typeFile.find('[name="'+index+'"]').remove();
            // console.log(index+"附件上传失败，请重新上传");
        }
    });
}

// 处理结果 附件上传 动态生成html需每次生成页面时即调用
fileUpload('#resultUpload',$("#resultFile"));
// 满意度 附件上传 动态生成html需每次生成页面时即调用
fileUpload('#satisUpload',$("#satisFile"));

2.layui upload 第二次上传无效 静态页面

注意：静态页面需要在页面首次加载时就调用upload方法，与其他动态生成附件调用upload的方法不可一起

<div class="layui-files" id="typeFile">
    <!-- <a class="file" href="javascript:;">
        <img class="layui-icon" src="../images/files/icon_audio.png"/>
        <p title="附件名称">附件名称</p>
        <img class="layui-a layui-del" src="../images/btn_delete.png"/>
    </a> -->
    <button type="button" class="layui-btn layui_btn_upload" id="typeUpload"></button>
</div>


var form, caseedit = null;
layui.use(['jquery','layer','element','form','laydate','upload'], function(exports){
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element,
        laydate = layui.laydate,
        upload = layui.upload;
    form = layui.form;
    caseedit = layui.caseedit;
    
    // 案件状态 附件上传 静态页面需首次加载即调用
    fileUpload('#typeUpload',$("#typeFile"));
    
});

效果图如下所示：