찾아보기 버튼에서 파일을 선택하면 이미지가 표시되지 않습니다.

Question

저는 laravel 4를 사용 중이며 Form :: file ('image')을 사용하여 이미지를 업로드하고 저장합니다. 제대로 작동합니다. 그러나 찾아보기 버튼을 클릭하면 업로드 된 이미지 이름 만 표시됩니다. 나는 올려 진 심상을 보여주고 싶다.

{{ Form::open(array('route'=>'speaker.store','files' => 'true')) }} 
    {{ Form::label('image','Image') }} 
    {{ Form::file('image') }} 
    {{ Form::submit('Save') }} 
    <a href="{{ URL::route('speaker.index') }}">Cancel</a> 
{{ Form::close() }} 

양식을 업데이트 할 때 이전 이미지가 표시되고 새로운 탐색 이미지를 표시하고 싶습니다.

{{ Form::model($speaker,array('route' =>array('speaker.update',$speaker->id),'method' => 'post','files' => true)) }} 
    <img alt="{{ $speaker->name }}" src="{{ URL::to($speaker->image) }}"> 
    {{ Form::file('image') }} 

    {{ Form::submit('Update') }} 

    <a href="{{ URL::route('speaker.index') }}">Cancel</a> 

{{ Form::close() }} 

Answer 1

물론 그렇지 않습니다. 이것이 브라우저의 기본 동작입니다.

JavaScript를 사용하여이 클라이언트 측에서 수행해야합니다. Form::file

{{ Form::file('image', array('id' => 'image-input')) }} 

에

가지 적어의 ID는이 요소 위에 change 이벤트 핸들러를 등록한다.

document.getElementById('image-input').addEventListener('change', handleFileSelect, false); 

당신이 원하는 것을하는 handleFileSelect 함수를 만듭니다. 당신은 image이 추가 또는 뭔가 다른 위치를 변경할 수 있습니다

function handleFileSelect(evt) 
{ 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) 
    { 
     // Only process image files. 
     if (!f.type.match('image.*')) { 
      continue; 
     } 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
      return function(e) { 
       // Render thumbnail. 
       var image = document.createElement('img'); 
       image.src = e.target.result; 

       document.body.appendChild(image); 
      }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
} 

...

이 기억은, 브라우저 및 localY 파일을 읽을 (여기을 FileReader과 파일 목록) HTML5 파일 API를 지원해야합니다.

나는 실수로 구문 오류 또는 유사한 죄송합니다.