LayUI 多图上传操作实例参考

最新推荐文章于 2026-05-24 10:40:26 发布

原创最新推荐文章于 2026-05-24 10:40:26 发布 · 1.5w 阅读

33 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layUI #upload

♙ 背景

最近开发新项目的后台，需要上传多张图片的功能，并且使用的是 Layui 前端框架，在整合效果的过程中，也是费了好多时间，在此稍作记录，希望能帮到各位道友！谢谢…

✄ 操作步骤

本文，主要展示核心的操作代码，当然注意是在引入 layui.css、layui.js 的前提下(赘述一番)

① 首先，展示一下效果：

②. 局部 `html` 代码参考

首先展示一下核心代码：

    <div class="layui-form-item">
        <label class="layui-form-label">多图列表：</label>
        <div class="layui-upload layui-input-block">
            <button type="button" class="layui-btn" id="btn_multiple_upload_img">多图上传</button>
            <button type="button" class="layui-btn" id="btn_image_clear">清空多图</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <div class="layui-upload-list" id="upload_image_list"></div>
                <input type="hidden" name="images_str" class="upload_image_url" value="">
            </blockquote>
        </div>
    </div>

注意其中的一个<input> 作为隐藏域，用于保存多图上传的资源数组，方便后期进行 form 表单的提交）

③. 核心 `js` 代码参考

参考 layUI 官方文档，以及下面所作的部分解释，应该能看个八分懂吧 …

/**
 * 多图上传按钮 监听事件
 */
layui.use(['upload'], function () {
    var upload = layui.upload;
    upload.render({
        elem: '#btn_multiple_upload_img'
        ,url: image_upload_url //改成您自己的上传接口
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#upload_image_list').append('<img style="height: 66px;margin-left: 7px" src="'+ result +'" title="单击删除" οnclick="delMultipleImgs(this)" class="layui-upload-img">');
            });
        }
        ,done: function(res){
            //上传完毕
            if (res.status == 1) {
                var last_url = $(".upload_image_url").val();
                var upload_image_url = "";
                if(last_url){
                    upload_image_url = last_url+","+res.data.url;
                }else {
                    upload_image_url = res.data.url;
                }
                $(".upload_image_url").val(upload_image_url);
            }else {
                dialog.tip(res.message);
            }
        }
    });
});
/**
 * 多图清除按钮点击事件
 */
$("#btn_image_clear").click(function () {
    $('#upload_image_list').html("");
    $(".upload_image_url").val('');
});

/**
 * 多图上传的单击删除操作
 * @param this_img
 */
function delMultipleImgs(this_img) {
    //获取下标
    var subscript = $("#upload_image_list img").index(this_img);
    multiple_images = $('.upload_image_url').val().split(",");
    //删除图片
    this_img.remove();
    //删除数组
    multiple_images.splice(subscript, 1);
    $('.upload_image_url').val(multiple_images);
};

④. 补充参考 `PHP` 后台上传图片资源的代码

毕竟本小白是个PHPer，语言都是相通的，不要太纠结.

<?php
namespace app\api\Controller;
use think\Request;
class Upload
{
    /**
     * 单一图片的上传操作
     * @param Request $request
     */
    public function img_file(Request $request)
    {
        $status = 0;
        $data = [];
        if ($request->Method()== 'POST') {
            $file = $request->file('file');
            // 移动到框架应用根目录/upload/ 目录下
            $info = $file->move('upload');
            if ($info){
                //把反斜杠(\)替换成斜杠(/) 因为在windows下上传路是反斜杠径
                $getSaveName=str_replace("\\","/",$info->getSaveName());
                $fileUrl = '/upload/'.$getSaveName;
                $status = 1;
                $data['url'] = $fileUrl;
                $message = '上传成功';
            }else{
                $message = "上传失败 ".$file->getError();
            }
        } else {
            $message = "参数错误";
        }
        return showMsg($status, $message,$data);
    }
}