使用 AJAX 和 Laravel 显示上传的图像答案

【问题标题】：Display uploaded image using AJAX and Laravel使用 AJAX 和 Laravel 显示上传的图像
【发布时间】：2018-02-06 15:43:36
【问题描述】：

我想显示上传图片的缩略图，而无需重新加载页面 (AJAX)。

这是我的 Laravel 控制器：

public function save(Request $request)
{
if (Input::hasFile('file'))
    {
        $file = $request->file('file');
        $name = $file->getClientOriginalName();
        Storage::disk('local')->put($name, File::get($file));
        $path = 'storage/files/';

        return response()->json(array('path'=> $path), 200);
    } else {
        return response()->json(false, 200);
    }
}

使用 Blade 的 HTML 视图：

@foreach($lists as $item)
    <div style="float: left;">
       <img id="preview" src="{{ asset('storage/files/'.$item->name) }}" alt="" with="100" height="100">
    </div>
@endforeach

这会在重新加载时显示图像，我想在不刷新网站的情况下显示它。

【问题讨论】：

你能展示你的ajax请求代码吗？
我没有，我在 Laravel 中创建了 JSON 响应，但我对 AJAX 的有限了解不允许我这样做。对不起。

标签： ajax image laravel upload blade

【解决方案1】：

您不需要 AJAX 来显示上传图像的缩略图。像这样更改您的form：

<img id="preview" src="{{ asset('storage/files/'.$item->name) }}" alt="" with="100" height="100">

<input type="file" name="image" style="display:none"; onchange="document.getElementById('preview').src = window.URL.createObjectURL(this.files[0])">

【讨论】：