ThinkPHP5+jquery实现批量上传图片并回显功能

THINKPHP5的批量上传图片功能开发，源码如下：

前端：

<link rel="stylesheet" href="css/upload.css">
<script src="js/jquery.min.js"></script>
<script src="js/upload.min.js"></script>

<a id="zwb_upload"><input type="file" class="add" multiple>点击上传文件</a>
<input type="text" name="file" id="callbackPath2">

<script>
    //配置需要引入jq 1.7.2版本以上
    //服务器端成功返回 {status:1,path:文件保存路径}
    //服务器端失败返回 {status:0,err:错误原因}
    //默认做了文件名不能含有中文,后端接收文件的变量名为file
    $("#zwb_upload").bindUpload({
        url: "{:url('index/upload')}",//上传服务器地址
        callbackPath: "#callbackPath2",//绑定上传成功后 图片地址的保存容器的id或者class 必须为input或者textarea等可以使用$(..).val()设置之的表单元素
        num: 10,//上传数量的限制 默认为空 无限制
        type: "jpg|png|gif|svg",//上传文件类型 默认为空 无限制
        size: 3,//上传文件大小的限制,默认为5单位默认为mb
    });
</script>

后端:

function upload()
{
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('file');
    // 移动到框架应用根目录/public/uploads/ 目录下
    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
    if ($info) {
    // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
        $path = $info->getExtension();
        // 成功上传后 返回上传信息
        return json(array('status' => 1, 'path' => $path));
    } else {
        // 上传失败返回错误信息
        return json(array('status' => 0, 'err' => '上传失败'));
    }
}