Rails 3: cách tốt nhất để xem trước hình ảnh trước khi tải lên

Question

Tôi cần xem trước hình ảnh trước khi gửi biểu mẫu. Tôi làm việc với Rails 3 và cần một cái gì đó tương thích với trình duyệt. Bất kỳ ý tưởng nào tôi có thể đạt được điều đó?

Answer 1

Vì vậy! :) Ý tưởng chính là sử dụng lớp Javascript FileReader, điều này thực sự thuận tiện cho những gì bạn cần làm.

Bạn chỉ cần nghe sự kiện "thay đổi" trên tệp nhập của bạn và sau đó gọi phương thức sẽ sử dụng phương thức "readAsDataURL()" của lớp FileReader. Sau đó, bạn chỉ cần điền vào nguồn của "thẻ img xem trước" với kết quả trả về của phương thức ...

Tôi đã viết cho bạn một số simple jsFiddle đạt được những gì bạn muốn. Bạn có thể xem mã của tôi dưới đây:

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

Và trong Tài liệu Mozilla, bạn có another example (chắc chắn mạnh mẽ hơn). Giải pháp này sẽ hoạt động với Safari (phiên bản 6.0+).

Đây là cách duy nhất tôi biết để xem trước hình ảnh trước khi gửi biểu mẫu, nhưng tôi nghĩ đó là cách khá phổ biến. Tất nhiên nó không có gì để làm với Ruby On Rails vì chúng tôi chỉ sử dụng Javascript ở đây ... Nó sẽ không thể làm điều đó bằng cách sử dụng Rails chỉ như bạn sẽ phải tải lên hình ảnh trước khi vẽ nó. (Vì Rails là phía máy chủ, tôi nghĩ bạn hoàn toàn hiểu tại sao. :))