Angezeigte Bilder mit AJAX und Laravel anzeigen

Question

Ich möchte ein Miniaturbild der hochgeladenen Bilder anzeigen, ohne die Seite neu laden zu müssen (AJAX).

Hier ist mein Laravel Controller:

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); 
    } 
} 

HTML-View Klinge mit:

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

Dies das Bild zeigt beim Nachladen, mag ich es anzuzeigen, ohne die Website zu aktualisieren.

Answer 1

Sie benötigen AJAX nicht, um eine Miniaturansicht des hochgeladenen Bildes anzuzeigen. Ändern Sie Ihre form wie folgt:

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