简介

Mupload是可以批量上传文件的插件，它结合FormData和Ajax,在layui基础上进行扩展的，同时它可以拖拽添加文件。

ScreenShots

1. 初始化状态
   
2. 点击按钮添加文件状态
   
3. 拖拽添加文件状态
   
4. 上传结束状态
   

页面初始化

//在页面上加入table元素
<table id="container" class="layui-table"></table>

//或者可以设置列的width;
<table id="container" class="layui-table">
    <colgroup>
        <col width="47%">
        <col width="37%">
        <col width="8%">
        <col width="8%">
        <col>
    </colgroup>
</table>

模块引入方式

推荐使用layui官网推荐的规范化的用法的方式引入mupload模块，
尽量不要用<script></script>元素引入mupload.js，这种方式会使mupload模块无法被正确加载

layui.config({
    base:'/path/', //mupload模块所在的目录
}).use(['mupload'], function(){
            layui.mupload({
              //必须，服务器路径
              url:'上传路径',
              //必须，传递table的id,请不要传class
              container:'容器id',
              //默认"file"，用于服务器获取文件名
              file_name:'file',
              //回调函数
              complete:function(res){
                  //res:返回所有文件的上传结果
              }
    });
  })

功能

1. 点击Button添加文件：在没有上传文件之前可以多次添加文件
2. 拖拽添加文件：可以向table容器中多次以拖拽的方式添加多张文件
3. 删除文件：在当前文件还没有上传之前可以将其删除

返回值

回调函数complete的参数是一个数组，包含每一个上传文件的返回值，且每一个返回值为json，你或许可以返回如下的信息：

[
    {
        code:0,
        msg:'上传成功',
        obj:{
            'filename':'filename1.jpg',
        }
    },
    {
        code:1,
        msg:'上传失败',
        obj:{}
    },
]

每一返回值一定返回一个类型为number的code,且code = 0 表示上传成功，code != 0 表示失败

服务器

这是一个在服务器上的php脚本的例子，结合codeigniter的文件上传类。

public function mupload(){
    $config['upload_path']      = './uploads/';
    $config['allowed_types']    = 'png|jpg|pdf';
    $this->load->library('upload', $config);
    $data['code']   = 0;
    $data['msg']    = '上传成功';
    //file即是客户端传回的file_name值
    if ($this->upload->do_upload('file')) {
        $data['client_name'] = $this->upload->data('client_name');
        $data['file_name'] = $this->upload->data('file_name');
        echo  json_encode($data);
    }else{
        $data['code']   = 1;
        $data['error']=$this->upload->display_errors();
        echo json_encode($data);
    }
}

mupload模块是在layui-v1.0.9-rls基础上扩展的,并没有在layui v2中测试过.
下载mupload模块

更新日志：

2017-04-04 增加多文件上传功能

2017-04-26 增加拖拽添加文件功能

end