如何在成功上传后立即显示新图像？

Question

我实施了徽标上传系统。它会马上生效。它需要我刷新页面才能看到效果。我想知道如何阻止它。

IMG

<img id="userLogo" src="/images/account/operator/logo.png" alt="" class="thumbnail img-responsive">

表格

{!! Form::open(array('url' => '/profile/logo/update', 'class' => 'form-horizontal', 'role' =>'form','id' => 'editLogo','files'=>true)) !!}

<input name="logo_path" type="file"> <br><br>

 <button class="btn btn-success btn-sm mr5" type="file"><i class="fa fa-user"></i> Update Logo</button>

{{ csrf_field() }}
{!! Form::close();!!}

控制器

public function updateLogo(){

    $inputs = Input::all();
    $logo_path = array('logo_path' => Input::file('logo_path'));

    $rule =  ['logo_path' => 'max:100|mimes:jpeg,bmp,png'];

    $id = Auth::user()->account_id;
    $type = Auth::user()->account_type;

    $validator = Validator::make($logo_path, $rule );

    if ( $validator->fails()) {
        return Redirect::to('/profile/')->withErrors($validator)->withInput();
    } else {

        $old_logo_path        = public_path().'/images/account/operator/logo.png';
        $delete = File::delete($old_logo_path);

        if (Input::hasFile('logo_path'))
        {

            $file            = Input::file('logo_path');
            $destinationPath = public_path().'/images/account/operator/';
            $uploadSuccess   = $file->move($destinationPath, 'logo.png');

        }

        return Redirect::to('/profile/')
        ->with('success','Your company logo was updated succesfully!');

    }
}

结果

我的文件已保存到我想要的位置。 但是当旧徽标仍然显示在页面上时 除非，我刷新页面，然后，我会看到我的新页面。

对此的任何提示/建议将不胜感激！

Answer 1

这是因为图像在浏览器中缓存，并且由于您要更新具有相同名称的图像，因此浏览器会显示已缓存的图像。因此，更好和有效的解决方案是每次上传图像时都有一个唯一的文件名，或者每次提供图像时都可以在图像路径上附加一个查询字符串。

<img id="userLogo" src="/images/account/operator/logo.png?q=<?php echo microtime(); ?>" alt="" class="thumbnail img-responsive">