ThinkPHP6中的多图上传以及图片预览

本文主要是介绍ThinkPHP6中的多图上传以及图片预览，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、html部分

    <form action="" method="post" enctype="multipart/form-data">
      <span>上传图片<input type="file" name="head_line_pic[]" multiple="multiple" value="上传图片" id="files"      accept="image/*"  onchange="javascript:setImagePreviews();"/></span>
       <button type="submit" class="button primary px-6"> 提交 </button>
         <div id="preview">
         //多图预览区域
        </div>
    </form>

二 、js部分

 //下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("files");
        var dd = document.getElementById("preview");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
            var imgObjPreview = document.getElementById("img"+i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                //控制缩略图大小
                imgObjPreview.style.width = '70px';
                imgObjPreview.style.height = '70px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "70px";
                localImagId.style.height = "70px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }

三、 PHP部分

                $files = '';
                $r_file=request()->file();
                if (!empty($r_file['head_line_pic'])) {
                    $files = request()->file('head_line_pic');  //接收图片
                }
                if (!empty($files)){
                 foreach ($files as $key => $file) {
                   $save_file_name = \think\facade\Filesystem::disk('public_admin_uploads')->putFile('head_line', $file, 'data');  //public_admin_uploads是路径，在config/filesystem.php里面配置的最下面我会列出我的filesystem.php配置文件的内容
                   if ($save_file_name == false) {
                      throw new Exception('图片上传失败');
                    }
                   $save_file_name = $file_path . (str_replace('\\', '/', $save_file_name));   //拼装新的路径
                   var_dump($save_file_name); //获得了上传图片的地址 存入到数据库就可以了
                  }
                }

四、 filesystem.php配置文件

return [
    // 默认磁盘
    'default' => env('filesystem.driver', 'local'),
    // 磁盘列表
    'disks'   => [
        'local'  => [
            'type' => 'local',
            'root' => app()->getRuntimePath() . 'storage',
        ],
        'public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/storage',
            // 磁盘路径对应的外部URL路径
            'url'        => '/storage',
            // 可见性
            'visibility' => 'public',
        ],
        'public_admin_uploads' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/uploads/admin',
            // 磁盘路径对应的外部URL路径
            'url'        => '/uploads/admin',
            // 可见性
            'visibility' => 'public',
        ],
        'public_api_uploads' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/uploads/api',
            // 磁盘路径对应的外部URL路径
            'url'        => '/uploads/api',
            // 可见性
            'visibility' => 'public',
        ],
    ],
];

          以上就是关于TP6多图上传以及图片预览功能，有什么问题欢迎大家评论留言！

这篇关于ThinkPHP6中的多图上传以及图片预览的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！