标签：files 预览 ThinkPHP6 多图 uploads file var 磁盘 public

一、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多图上传以及图片预览功能，有什么问题欢迎大家评论留言！

标签：files,预览,ThinkPHP6,多图,uploads,file,var,磁盘,public
来源： https://blog.csdn.net/xxx2434363961/article/details/120832951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。