LayUI 多图上传操作实例参考

• 最近开发新项目的后台，需要上传多张图片的功能，并且使用的是 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="单击删除" onclick="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，语言都是相通的，不要太纠结.

<?phpnamespace 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);
    }}

♖ 附录

• 1.多多动手，实际操作一下就会发现，没啥难的，就分个好不好看而已…

作者：热淘网

热淘博客 站点 QQ交谈