TP5.0整合webuploader实现多图片上传功能

在https://github.com/fex-team/webuploader 下载webuploader并解压，
解压后放到public里面。其中我把解压缩后的文件夹改名为webuploader，放到了public/static/文件夹下。

将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应需要文件上传功能的视图文件夹下面
将其中的css和js文件路径进行替换，ThinkPHP5.0中 __STATIC__直接指向了项目下的public/static文件下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/examples/imageupload/style.css" />
</head>
<body>
<div id="wrapper">
    <div id="container">
        <!--头部，相册选择和格式选择-->

        <div id="uploader">
            <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>
<script type="text/javascript" src="__STATIC__/webuploader/examples/imageupload/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="__STATIC__/webuploader/examples/imageupload/upload.js"></script>
</body>
</html>

找到webuploader/examples/imageupload/upload.js文件，在第154行，或者搜索server，将后台地址改为你想要的地址（其实就是指的文件上传的方法的地址），我的改成了’imgupload’ 注意经过我多次试验，’{:url(“”)}’助手函数不会被解析，这里不能使用。

文件上传的后台方法
将ThinkPHP5文档中关于图片上传的代码写进去，将请求的名称改成file。

public function imgupload()
    {
         $file = request()->file('file');
       // 移动到框架应用根目录/public/uploads/ 目录下
           $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
          if($info){
               // 成功上传后 获取上传信息
               // 输出 jpg

                $data = array('path'=>str_replace('\\',"/","/uploads/".$info->getSaveName())); 
                $nArr = db::name('images')->insert($data);

           }else{
               // 上传失败获取错误信息
               echo $file->getError();
           }


    }

具体上传到那个文件夹、上传大小类型后缀的验证、文件的命名规则等，根据自己需要进行书写。注意这里虽然是多图上传，但上传时候的循环已经被插件封装好了，不需要我们使用多图上传中的循环方式进行上传。

上传界面如下
这里写图片描述

TP5.0整合webuploader实现多图片上传功能

猜你喜欢