ThinkPHP5&5.1下WebUploader多图上传工具Demo

• 网上关于多图上传实时显示的插件比较多，但免费的不好用，好用的不免费，有的兼容性不好，有的已经不再维护很多年，这里介绍一个百度出的多图上传插件——webuploader（http://fex.baidu.com/webuploader/），首页的快速开始就给出了一个简单的使用方法，但过于简单，没有样式；而它的Demo既没有给出代码，而且也没有实现功能，后来发现这个Demo的源码放到了GitHub上，我们只需要下载下来，结合ThinkPHP5&5.1进行改进就可以了。

• 首先是去GitHubhttps://github.com/fex-team/webuploader上进行下载，由于访问速度慢，我已经下载好了，解压后放到public里面。其中我把解压缩后的文件夹改名为webuploader，放到了public/static/index文件夹下。

• 在你想测试的控制器中建立一个方法，我这里是在index模块member控制器下建立了一个名为webuploader()的方法。

        

实例

public function webuploader()
{
    return view();
}

• 将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应的视图文件夹下面（本例为application/index/view/member），并重命名为webuploader.html。

• 将其中的css和js文件路径进行替换，（ThinkPHP5.1已经不再默认任何的__替换，需要自己进行书写）。

  
  

实例

<link rel="stylesheet" type="text/css" href="__INDEX__/webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="__INDEX__/webuploader/examples/imageupload/style.css" />
<script type="text/javascript" src="__INDEX__/static/js/jquery.js"></script>
<script type="text/javascript" src="__INDEX__/webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="__INDEX__/webuploader/examples/imageupload/upload.js"></script>

• 其中为了提高网站效率，如果你的页面已经引入了jquery文件，那么你就可以不再引入webuploader提供的jquery文件，当然如果两个jquery版本相差过大有可能出问题。在这里__INDEX__是我自己定义的模板替换路径，写在ThinkPHP5或5.1中找到相应的配置文件。

  
  

实例

'tpl_replace_string'    =>  [
        '__ADMIN__' =>  '/xkershouche/public/static/admin',
        '__UPLOADS__' =>  '/xkershouche/uploads',
        '__INDEX__' =>  '/xkershouche/public/static/index',
    ]

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

• 在Member控制器下写一个carsuploads方法，将ThinkPHP5&5.1文档中关于图片上传的代码写进去，将请求的名称改成file。

  
  

• 实例

  $file = request()->file('file');  //这个地方不需要再使用tp框架中的多图上传代码了，因为插件已经循环上传了，  只需写单个上传图片的代码就可以了。

  
  

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

• 上传界面如图：