layui的多文件上传+formData+ajax提交文件+thinkphp5后台接收

最新推荐文章于 2025-06-24 13:40:31 发布

原创

最新推荐文章于 2025-06-24 13:40:31 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

layui的多图片上传+formData+ajax提交文件+thinkphp5后台接收

1、需求：多图片和文本内容同时提交，thinkphp5后台处理，方便数据库回滚

2、layui多文件上传局限性：有几张图片就会向后台请求几次

3、使用layui组件原因：方便图片预览，图片删除功能的实现

4、实现思路

（1）利用layui多文件上传组件，更方便的实现图片预览和删除功能，但不使用它本身提交图片

（2）利用全局变量files，每次选择文件时，把文件追加到files中

（3）利用formData对象，把全局变量files 中的文件以及文本内容存入formData中

（4）ajax提交

5、代码

HTML代码：

<div class="layui-upload">
   <button type="button" class="layui-btn" id="file">图片上传: </button>
   <blockquote class="layui-elem-quote layui-quote-nm">
    预览图:
      <div class="layui-upload-list">
          <ul id="photo-list"></ul>
       </div>
    </blockquote>
</div>

js代码：

var files = '';//定义全局变量，以便每次选择图片时，把文件放入队列
/******图片的预览，删除******/
function uploadImages(){
    layui.use('upload', function(){
        let upload = layui