TP5结合Webuploder实现多图上传

首先需要先下载Webuploader

webuploader-demo的css和js下载

webuploader初始化

<!--引入css和js【这里必须引入bootstrap】-->
<link href="{__ADMIN_PATH}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="{__ADMIN_PATH}css/animate.css" rel="stylesheet">
<link href="{__ADMIN_PATH}css/font-awesome.css?v=4.4.0" rel="stylesheet">
<script src="{__ADMIN_PATH}js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" type="text/css" href="{__PLUG_PATH}webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="{__ADMIN_PATH}css/webuploader-demo.css">

<!-- Web Uploader 引入你的webupload --> 
<script type="text/javascript">
    var ul="{__PLUG_PATH}";
    // 添加全局站点信息
    var BASE_URL = ul+'webuploader';  //webupload 地址
    var up_load="{:url('admin/common/Webploader')}"  //图片上传地址
    var val_id="imageurl"; //存储上传图片的ID
</script>


<script src="{__PLUG_PATH}webuploader/webuploader.min.js"></script>
<script src="{__ADMIN_PATH}js/webuploader-demo.js"></script>

页面html代码

<div class="col-sm-12">
    <div class="ibox float-e-margins">

        <div class="ibox-content">
            <div class="page-container">

                <div id="uploader" class="wu-example">
                    <input type="hidden" id="{$imageurl}" name="{$name}" class="layui-input" lay-verify="{$verify}" lay-reqText="请先上传图片" style="width: 100%"> <!--存放图片路径-->
                    <div class="queueList">
                        <div id="dndArea" class="placeholder">
                            <div id="filePicker"></div>
                            <p>或将照片拖到这里，单次最多可选300张</p>
                        </div>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div>
                        <div class="info"></div>
                        <div class="btns">
                            <div id="filePicker2"></div>
                            <div class="uploadBtn">开始上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

图片上传代码

/**
* @return string
* webuploader 上传图片
*/
public function imgupload()
{
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.'images');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
$data['path']=str_replace('\\',"/","/uploads/".$info->getSaveName());
return json_encode($data['path']);//把路径ajax用json方式返回到视图中
  }else{
 // 上传失败获取错误信息
  echo $file->getError();
  }
}

来源：CSDN

作者：Top丶Rachel

链接：https://blog.csdn.net/qq_24562495/article/details/104513872

标签

webuploader

css