layui多文件上传

最新推荐文章于 2022-07-23 10:39:06 发布

扛起拖把扫天下

最新推荐文章于 2022-07-23 10:39:06 发布

阅读量3.1k

点赞数 3

分类专栏： web

本文链接：https://blog.csdn.net/cainiaonixi/article/details/82351023

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述
页面的编写（注意：引入layui相关的css）：

<body class="childrenBody">
<div class="layui-upload">
   <button type="button" class=" layui-btn layui-btn-normal" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
   <div class="layui-upload-list layui-upList-minHeight">
      <table class="layui-table">
         <thead>
         <tr><th>文件名</th>
            <th>大小</th>
            <th>状态</th>
            <th>操作</th>
         </tr></thead>
         <tbody id="demoList">
                <tr id="upload"><td>xxx.txt</td><td>xxxkb</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" disabled>删除</button></td></tr>
            </tbody>
      </table>
   </div>
    <div class="layui-form-item layui-btn-Center">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="choiceListAction">开始上传</button>
            <button class="btn layui-btn layui-btn-primary js_close" id="quXiao" type="button">取消</button>
        </div>
    </div>
</div>

js的编写（引入layui相关的js）：

$(function(){
    var uploadFile={
        init:function () {
               this.upload();
           },
      //上传文件
      upload:function(){
               layui.use('upload', function(){
                   var $ = layui.jquery,
                       upload = layui.upload;
                   //多文件列表示例
                   var demoListView = $('#demoList'),
                       uploadListIns = upload.render({
                       elem: '#choiceList',
                       url: '/file/uploadFile',
                       accept: 'file',
                       multiple: true,
                       auto: false,
                       bindAction: '#choiceListAction',
                       choose: function(obj){
                           var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                           //读取本地文件
                           obj.preview(function(index, file, result){
                               if($('#demoList tr td').eq(0).text()=='xxx.txt'){
                                   $('#demoList').empty();
                               }
                               var tr = $(['<tr id="upload-'+ index +'">',
                                   '<td>'+ file.name +'</td>',
                                   '<td>'+ (file.size/1014).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){
                           if(res.code == 0){ //上传成功
                               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,res.msg);
                       },
                       error: function(index, upload,msg){
                           var tr = demoListView.find('tr#upload-'+ index)
                               ,tds = tr.children();
                           tds.eq(2).html('<span style="color: #FF5722;">'+msg+'</span>');
                           tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                       }
                   });
               });
      }

   }
       uploadFile.init();
})

Java后台的编写（layui的多文件上传其实是一个文件文件的上传）：

@RequestMapping("/uploadFile")
@ResponseBody
public JSONObject uploadFile(@RequestParam("file") MultipartFile file){
    JSONObject json = new JSONObject();
    Boolean flag=false;
    Map<String,Object> param=new HashMap<>();
    if(file.isEmpty()){
        json.put("msg","文件不能为空");
        json.put("code", Const.STATUS_FAIL);
      return json;
    }

    try{
        String path = “换成自己要保存的地址”;
        File dest = new File(path+fileName);
       if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
                   dest.getParentFile().mkdir();
               }
        file.transferTo(dest);
        json.put("msg","上传成功");
        json.put("code", Const.STATUS_SUCCESS);
    }catch(Exception e){
        e.printStackTrace();
        json.put("msg","上传失败,请重新上传");
        json.put("code", Const.STATUS_FAIL);
    }

    return json;
}

扛起拖把扫天下

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
layui多文件上传

效果图：页面的编写（注意：引入layui相关的css）：&amp;lt;body class=&quot;childrenBody&quot;&amp;gt;&amp;lt;div class=&quot;layui-upload&quot;&amp;gt; &amp;lt;button type=&quot;button&quot; class=&quot; layui-btn layui-
复制链接

扫一扫

专栏目录