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下的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框架中的多图上传代码了，因为插件已经循环上传了， 只需写单个上传图片的代码就可以了。
运行实例 »点击 "运行实例" 按钮查看在线实例
具体上传到那个文件夹、上传大小类型后缀的验证、文件的命名规则等，根据自己需要进行书写。注意这里虽然是多图上传，但上传时候的循环已经被插件封装好了，不需要我们使用多图上传中的循环方式进行上传。
-
上传界面如图：