你的位置 > 网站首页 > 技术文章 > ThinkPHP5+Upload实现批量上传图片手册2018版

ThinkPHP5+Upload实现批量上传图片手册2018版

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

<input type="text" name="file" id="callbackPath2">

<script>

    //配置需要引入jq 1.7.2版本以上

    //服务器端成功返回 {state:1,path:文件保存路径}

    //服务器端失败返回 {state:0,errmsg:错误原因}

    //默认做了文件名不能含有中文,后端接收文件的变量名为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>

public 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('state'=>1,'path'=>$path));

    }else{

        // 上传失败返回错误信息

return json(array('state'=>0,'errmsg'=>'上传失败'));

    }

}

引用文件:


<link rel="stylesheet" href="css/upload.css">

<script src="js/jquery.min.js"></script>

<script src="js/upload.min.js"></script>


快速仿站

Hi, 欢迎加入NAZ.CN技术交流群,带你装逼带你飞!

我要入群