layui上传文件（通过id抓取文件）

最新推荐文章于 2024-01-06 16:38:16 发布

原创最新推荐文章于 2024-01-06 16:38:16 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui上传文件（通过id抓取文件）

Web层应用框架专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了使用layui框架实现多文件上传功能的方法。通过具体的代码示例，展示了如何利用layui的upload模块进行文件选择、上传及后端交互，同时实现了上传进度监控、上传成功后的文件信息展示等功能。

<div class="col-md-1 col-md-gg">
    <div class="form-group">
        <!--<button id="sysDocUploadBtn" class="layui-btn" type="button" onclick="$('#annex_name').click()" style="display: inline-block;"><i class="layui-icon"></i>上传附件</button><input type="file" id="annex_name" name="annex_name" style="display:none;" onclick="addAnnex()">-->
        <button type="button" class="layui-btn" id="test1" style="margin-right: 10px">
            <i class="layui-icon">&#xe67c;</i>上传附件
        </button>
    </div>
</div>
<input type="hidden" id="file_url" name="file_url"  />

<table class="layui-table ">
    <thead>
    <tr>
        <th>附件名称</th>
        <th>附件用途</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="annexTbody" border="1px" width="100%" align="center">
    </tbody>
</table>

================================================================================================

<!-- 多文件上传功能 start -->
<script>
    var uploadList = [];
    var uploadIndexList = [];
    layui.use([ 'layer','upload'], function(){
        var layer = layui.layer;
        var upload = layui.upload; //得到 upload 对象
        upload.render({
                          elem: '#test1'
                          ,url: '../file/fileUpload'
                          ,method: 'post'
                          ,done: function(res, index, upload){ //上传后的回调
                var uploadObject = new Object();
                if(res.msg=='1'){
                    layer.msg("上传成功");
                    //生成上传成功后的文件信息tr
                    addUpoloadTr(getUUID(),res.file_name,res.file_url,$('#annex_class option:selected').val(),$('#annex_class option:selected').text());
                }else{
                    layer.msg("上传失败");
                }
            }
                          ,accept: 'file' //允许上传的文件类型
                      })
    });

    function addUpoloadTr(id,file_name,file_url,annex_class,annex_class_name){

        var uploadObject = new Object();
        uploadObject['annexId'] = id;
        uploadObject['annexName'] = file_name;
        uploadObject['fileUrl'] = file_url;
        uploadObject['annexClass'] = annex_class;
        uploadList.push(uploadObject);
        uploadIndexList.push(id);

        var tablestr = "";
        tablestr += "<tr id=\"tr_annex_"+id+"\">";
        tablestr += "<input type=\"hidden\" value="+id+" name=\"annex_id\"/>";
        tablestr += "<td><a href='" + file_url + "' style='text-decoration:underline;color:#007DDB' target='_blank'>" + file_name + "</a></td>";
        tablestr += "<td style=\"text-align: center; vertical-align: middle; width: 100px; \">"+ annex_class_name +"</td>";
        tablestr += "<td><a class=\"layui-btn layui-btn-mini layui-btn-danger\" onclick=\"delUploadTr('tr_annex_"+ id +"')\">";
        tablestr += "<i class='iconfont icon-shenpi'>删除</i></a></td>";
        tablestr += "</tr>";
        $("#annexTbody").append(tablestr);
    }

    function delUploadTr(id){
        uploadList.splice(uploadIndexList.indexOf(id.replace("tr_annex_",""),0),1);
        $("#"+id).remove();
    }

    /**
     * 获取系统随机UUID
     * @returns {string} UUID
     */
    function getUUID(){
        var UUID = "";
        $.ajax({
                   url: contextPath + "/getUUID",
                   type: "post",
                   async: false,
                   datatype: "text",
                   success: function (res) {
                       UUID = res;
                   },
                   error: function () {
                       alert('系统出现异常');
                   }
               });
        return UUID;
    }
</script>
<!-- 多文件上传功能 end -->