tp5 单文件上传和多文件上传

页面效果图如下:

图片.png
前端代码

<!DOCTYPE html>
<html>
<head>
    <title>文件上传-Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<form>
    <div class="form-inline">
        <label for="text">文本内容:</label>
        <input type="text" class="form-control" id="text" name="text" placeholder="Text input">
    </div>

    <div class="form-inline">
        <div>
            <label>多选:</label>
        </div>
        <label class="checkbox-inline">
            <input type="checkbox" id=checkbox" name="checkbox" value="1"> 管理
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="checkbox" name="checkbox" value="2"> 员工
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="checkbox" name="checkbox" value="3"> 网管
        </label>
    </div>
    <div class="form-inline">
        <label for="file">单文件上传:</label>
        <input type="file" id="file" name="file">
    </div>
    <div class="form-inline">
        <label for="files">多文件上传:</label>
        <input type="file" multiple="multiple" id="img" name="img">
    </div>

    <div class="form-inline">
        <button type="button" class="btn btn-primary">提交</button>
    </div>
</form>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('.btn').click(function () {
            //获取input文本框值
            var text = $('#text').val();
            console.log(text);

            //获取复选框值
            var checkArr = [];//定义一个数组
            $('input[name="checkbox"]:checked').each(function () {
                //遍历每一个名字为interest的复选框，其中选中的执行函数
                checkArr.push($(this).val());//将选中的值添加到数组chk_value中
            });
            console.log(checkArr);

            //获取单个文件上传信息
            var file = $('#file')[0].files[0];
            console.log(file);

            //获取多个文件上传信息
            var img = $('#img')[0].files;
            console.log(img);

            formData = new FormData();
            formData.append('text', text);
            formData.append('checkArr', checkArr);
            formData.append('file', file);
            
            for (var i = 0; i < img.length; i++) {
                formData.append('img[]', img[i]);
            }

            add(formData);
            //ajax执行添加数据
            function add(arr) {
                $.ajax({
                    type: 'post',
                    data: arr,
                    url: '/index/demo1/uploads/',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log(data);
                        if (data.status) {
                            alert(data.msg);
                        } else {
                            alert(data.msg);
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>

后端代码

    public function uploads(Request $request)
    {

        if ($request->isPost()) {
            //获取表单提交的数据
            $post = $request->param(true);

            //获取单个上传文件数据
            $file = $request->file('file');
//            dump($file);
            //获取多个文件上传数据
            $imgArr = $request->file('img');
//            dump($imgs);

            if ($file) {
                // 上传到框架应用根目录/public/uploads/ 目录下
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

                if ($info) {
                    //上传成功后,获取上传信息
                    $post['file'] = $info->getSaveName();
                } else {
                    $this->error($file->getError());
                }
            } else {
                $this->error($file->getError());
            }

            if ($imgArr) {
                foreach ($imgArr as $value) {
                    // 移动到框架应用根目录/public/uploads/ 目录下
                    $infos = $value->move(ROOT_PATH . 'public' . DS . 'uploads');

                    if ($infos) {
                        $imgsName[] = $infos->getSaveName();
                    } else {
                        $this->error($file->getError());
                    }
                }
                //将img_name数组分割成字符串
                $post['img'] = implode(';', $imgsName);

            } else {
                $this->error($file->getError());
            }

            $res = Db::table('uploads')->insert($post);

            if ($res > 0) {
                return json(['status' => true, 'msg' => '数据添加成功']);
            } else {
                return json(['status' => false, 'msg' => '数据添加失败 , 请重试~']);
            }
        } else {
            return view('uploads/index');
        }

    }

    public function upload()
    {
        $file = Request::file('file');
        if (empty($file)) return ResultJson::resJsonData('请选择上传文件', 1);
        // 单文件上传
        $info = $file->validate(['size' => 95678000, 'ext' => 'xlsx'])
            ->move('../public/uploads/files/' . date('Ymd', time()) . '/', '');
        if ($info) {
            return ResultJson::resJsonData([
                'path' => date('Ymd', time()) . '/' . str_replace("\\", "/", $info->getSaveName())
            ]);
        } else {
            return ResultJson::resJsonData($file->getError(), 1);
        }
    }