thinkphp 使用webuploader 回显图片，生成缩略图，多图片上传 1

刚使用webuploader的时候都会遇到这些问题：

1.上传图片2.回显图片3.生成缩略图4.多图片上传

1.上传图片

        // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker-2',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '__STATIC__/lib/webuploader/0.1.5/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: '/admin/Article/ts',
            // runtimeOrder: 'flash',
            compress: false,//不启用压缩
            // resize: false,//尺寸不改变
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 1,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });

这里改server和swf的路径就可以访问后台了，

后台代码：这里给了两张上传图片方式

第一种

    public function ts(){
        // dump(request()->file());
        $date = date('Ymd',time());
        $uploadPath = 'storage/'.$date; 
        if ($_FILES['file']["size"] < 1024 * 1024 * 2) { 
            $suffix = substr($_FILES['file']["name"], strrpos($_FILES['file']["name"], '.') + 1);  
            $imgDate=date("YmdHis");  
            $name = $imgDate . rand("1000", "9999") . "." . $suffix;
            $thum_name = $imgDate . rand("1000", "9999")+1 . "." . $suffix;
            if (!is_dir($uploadPath)) { 
                mkdir($uploadPath);  
            }
            $callback_img  = $uploadPath . "/" . $name;
            if (move_uploaded_file($_FILES['file']["tmp_name"], $callback_img)) { 
                $callback_img = '/'.$callback_img;
                return json(['status'=>1,'msg'=>'上传成功','data'=>$callback_img]);
            }     
        }else{
            return json(['status'=>0,'msg'=>'图片太大']);
        }
    }

第二种：

    public function fileupload(){
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
        header("Cache-Control: no-store, no-cache, must-revalidate");
        header("Cache-Control: post-check=0, pre-check=0", false);
        header("Pragma: no-cache");
        
        
        // Support CORS
        // header("Access-Control-Allow-Origin: *");
        // other CORS headers if any...
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            exit; // finish preflight CORS requests here
        }
        
        if ( !empty($_REQUEST[ 'debug' ]) ) {
            $random = rand(0, intval($_REQUEST[ 'debug' ]) );
            if ( $random === 0 ) {
                header("HTTP/1.0 500 Internal Server Error");
                exit;
            }
        }
        // dump($_FILES["file"]["tmp_name"]);exit;
        // header("HTTP/1.0 500 Internal Server Error");
        // exit;
        
        // 5 minutes execution time
        @set_time_limit(5 * 60);
        
        // Uncomment this one to fake upload time
        // usleep(5000);
        
        // Settings
        // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
        $date = date('Ymd',time());
        // $uploadPath = 'storage/'.$date;
        $targetDir = 'upload_tmp';
        $uploadDir = 'storage/'.$date;
        
        $cleanupTargetDir = true; // Remove old files
        $maxFileAge = 5 * 3600; // Temp file age in seconds
        
        
        // Create target dir
        if (!file_exists($targetDir)) {
            @mkdir($targetDir);
        }
        
        // Create target dir
        if (!file_exists($uploadDir)) {
            @mkdir($uploadDir);
        }
        
        // Get a file name
        if (isset($_REQUEST["name"])) {
            $fileName = $_REQUEST["name"];
        } elseif (!empty($_FILES)) {
            $fileName = $_FILES["file"]["name"];
        } else {
            $fileName = uniqid("file_");
        }
        $suffix = substr($fileName, strrpos($fileName, '.') + 1);  
        $imgDate=date("YmdHis");  
        $fileName = $imgDate . rand("1000", "9999") . "." . $suffix; 
        $filePath = $targetDir . '/' . $fileName;
        $uploadPath = $uploadDir . '/' . $fileName;

        // Chunking might be enabled
        $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
        $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
        
        
        // Remove old temp files
        if ($cleanupTargetDir) {
            if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
            }
        
            while (($file = readdir($dir)) !== false) {
                $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;
        
                // If temp file is current file proceed to the next
                if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
                    continue;
                }
        
                // Remove temp file if it is older than the max age and is not the current file
                if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
                    @unlink($tmpfilePath);
                }
            }
            closedir($dir);
        }
        
        
        // Open temp file
        if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
        }
        
        if (!empty($_FILES)) {
            if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
            }
        
            // Read binary input stream and append it to temp file
            if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        } else {
            if (!$in = @fopen("php://input", "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        }
        
        while ($buff = fread($in, 4096)) {
            fwrite($out, $buff);
        }
        
        @fclose($out);
        @fclose($in);
        
        rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");
        
        $index = 0;
        $done = true;
        for( $index = 0; $index < $chunks; $index++ ) {
            if ( !file_exists("{$filePath}_{$index}.part") ) {
                $done = false;
                break;
            }
        }
        if ( $done ) {
            if (!$out = @fopen($uploadPath, "wb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
            }
        
            if ( flock($out, LOCK_EX) ) {
                for( $index = 0; $index < $chunks; $index++ ) {
                    if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
                        break;
                    }
        
                    while ($buff = fread($in, 4096)) {
                        fwrite($out, $buff);
                    }
        
                    @fclose($in);
                    @unlink("{$filePath}_{$index}.part");
                }
        
                flock($out, LOCK_UN);
            }
            @fclose($out);
        }
        // Return Success JSON-RPC response
        return json(['status'=>1,'msg'=>'上传成功','data'=>$uploadPath]);
        // die('{"jsonrpc" : "2.0", "result" : $filePath, "id" : "id"}');
    }

这些都是改下路径就能用了,上传完成之后就会有编辑的需求,编辑的时候就会遇到怎么回显图片，就是刷新页面图片还在，为了不显的啰嗦，图片回显放下一篇文章