October/WinterCMS实现表单图片的异步上传

October/WinterCMS实现表单图片的异步上传

前文使用的和数据同步请求,在实际情况中由于仅显示了文件名,而且合并图片的上传请求会让速度变慢,今天把之前的代码改造一下把图片实现异步上传并可预览。

依旧是两个部分,首先是前端文件上传表单

    <input type="file" name="awardimage" accept="image/*" data-request="onImageUpload" data-request-files data-request-flash>

    <div id="imageResult">No image to preview!</div>

其中#imaeResult为上传成功返回的图片预览。

接下来是data-request中的后端部分

    public function onImageUpload(){
        $image = Input::all();
        $file = (new File())->fromPost($image['awardimage']);

        return [
            '#imageResult' => '<img src="'. $file->getThumb(200, 200, ['mode' => 'crop']) .'">'
        ];
    }

是不是非常简单。

Post Comment