layui jquery如何实现多图片上传

可以使用 layui 的 upload 模块和 jquery 实现多图片上传。

1. 引入 layui 和 jquery：

   <link rel="stylesheet" href="layui/css/layui.css">
   <script src="jquery/jquery.min.js"></script>
   <script src="layui/layui.all.js"></script>

2. 定义上传组件：

   <div class="layui-upload">
     <button type="button" class="layui-btn" id="upload">上传图片</button>
     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
       预览图：
       <div class="layui-upload-list" id="preview"></div>
     </blockquote>
   </div>

3. 初始化上传组件：

   layui.use('upload', function(){
     var upload = layui.upload;
   
     //执行实例
     var uploadInst = upload.render({
       elem: '#upload', //绑定元素
       multiple: true, //是否允许多文件上传
       accept: 'images', //指定允许上传的文件类型
       field: 'file', //设定文件域的字段名
       url: '/upload/', //上传接口
       done: function(res){
         //上传完毕回调
         console.log(res);
         $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">')
       },
       error: function(){
         //请求异常回调
       }
     });
   });

说明：

- `elem`：绑定选择器，即上传按钮的选择器。
- `multiple`：是否允许多文件上传。
- `accept`：指定允许上传的文件类型。
- `field`：设定文件域的字段名。
- `url`：上传接口。
- `done`：上传完毕回调函数。
- `error`：请求异常回调函数。

4. 上传成功后，将图片预览在页面上：

   $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">')

说明：

- `#preview`：预览图片的容器选择器。
- `res.url`：上传成功后返回的图片地址。

以上就是利用 layui 和 jquery 实现多图片上传的方法。