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

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">