<input type="file">多图上传功能

  • 前端
  • 2022-08-21
  • 664 已阅读
  • 作者: huwhois
  • 来源:
简介HTML5 input file 新增 multiple 属性可实现多文件上传

HTML结构:

<div class="container">  
   <label>请选择文件:</label>  
   <input type="file" name="uoload_file"  multiple/>  
</div>  

 

后端使用 ThinkPHP6:

$files = $this->request->file('upload_file');

if ($files) {
    try {
        validate(
            [
                'file' => [
                    // 限制文件大小(单位b),这里限制为10M
                    'fileSize' => 10 * 1024 * 1024,
                    // 限制文件后缀,多个后缀以英文逗号分割
                    'fileExt'  => 'jpg,png,gif,jpeg,webp,jfif,pdf,doc,docx,xls,xlsx,ppt,pptx,txt'
                ]
            ],
            [
                'file.fileSize' => '文件太大',
                'file.fileExt' => '不支持的文件后缀',
            ]
        )->check(['file' => $files]);

        $uploadFiles = [];
        
        if (!is_array($files) && $files instanceof UploadedFile) {
            $uploadFiles[] = $files;
        } else {
            $uploadFiles = $files;
        }

        $url = Config::get('filesystem.disks.public.url');

        foreach ($uploadFiles as $file) {
            $savename = thinkfacadeFilesystem::disk('public')->putFile('/', $file);
            
            $savenames[] = $fileinfo->filepath;
        }

        return json(['code' => 0, 'msg'=>'上传成功', 'filename'=>$savenames]);
    } catch (ValidateException $e) {
        $this->error($e->getMessage());
    }
} else {
    $this->error('图片不能为空');
}

 

 

很赞哦! ( 0 )