Szyny 3: najlepszy sposób na podgląd obrazu przed przesłaniem

Question

Potrzebuję podgląd obrazu przed przesłaniem formularza. Pracuję z Rails 3 i potrzebuję czegoś, co jest kompatybilne z przeglądarką. Jakieś pomysły, w jaki sposób mogę to osiągnąć?

Answer 1

Tak! :) Główną ideą jest użycie klasy Javascript FileReader, która jest naprawdę przydatna do tego, co musisz zrobić.

Wystarczy, że wsłuchasz się w zdarzenie "change" na swoim pliku wejściowym, a następnie wywołasz metodę, która będzie korzystać z metody "readAsDataURL()" klasy FileReader. Następnie wystarczy wypełnić źródło "podglądu znacznika img", zwracając wynik metody ...

Napisałem Ci simple jsFiddle, który osiąga to, co chcesz. Można zobaczyć mojego kodu poniżej:

<!-- HTML Code --> 
<div class="upload-preview"> 
    <img /> 
</div> 
<input class="file" name="logo" type="file">  

//JS File 
$(document).ready(function(){ 
    var preview = $(".upload-preview img"); 

    $(".file").change(function(event){ 
     var input = $(event.currentTarget); 
     var file = input[0].files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
      image_base64 = e.target.result; 
      preview.attr("src", image_base64); 
     }; 
     reader.readAsDataURL(file); 
    }); 
}); 

oraz w dokumentacji Mozilla, masz another example (na pewno bardziej wydajny). To rozwiązanie powinno działać z przeglądarką Safari (wersja 6.0+).

Jest to jedyny znany mi sposób podglądu obrazu przed przesłaniem formularza, ale uważam, że jest to dość powszechny sposób. Oczywiście nie ma to nic wspólnego z Ruby On Rails, ponieważ używamy tylko Javascript tutaj ... Nie można byłoby tego zrobić używając Railsów tylko dlatego, że musiałbyś przesłać obraz przed renderowaniem go. (Ponieważ Rails jest po stronie serwera, myślę, że doskonale rozumiesz dlaczego.))