Question

使用附加按钮为三个不同图像中的每个图像显示预览的最佳方法是什么？

我的表格：

<%= @discount.errors.full_messages.first if @discount.errors.any? %>
<%= form_for @discount, url: {action: "create"} do |f| %>
    <%= f.label :name, "Name" %><br />
    <%= f.text_field :name, placeholder: "Name" %><br />
    <%= f.label :description, "Description" %><br />
    <%= f.text_area :description, placeholder: "Description" %><br />
    <%= f.label :start_date, "Valid from:" %><br />
    <%= f.date_select(:start_date) %><br />
    <%= f.label :expiration_date, "Valid to:" %><br />
    <%= f.date_select(:expiration_date) %><br />

    <%= f.label :thumbnail, "Thumbnail" %><br />
    <%= f.file_field :thumbnail, :html => {:multipart => true}  %><br />
    <div id="file1">
        <%= f.submit "Crop1" %><br />
    </div>
    <%= f.label :image, "Image" %><br />
    <%= f.file_field :image, :html => {:multipart => true}  %><br />
    <div id="file2">
        <%= f.submit "Crop2" %><br />
    </div>
    <%= f.label :activate_image, "Activate image" %><br />
    <%= f.file_field :activate_image, :html => {:multipart => true}  %><br />
    <div id="file3">
        <%= f.submit "Crop3" %><br />
    </div>


    <%= f.submit "Save" %>
<% end %>

我想在每个div中进行图像预览，并仅在上传图像时显示div。对于文件上传，我使用了蜻蜓宝石。

对于图像预览我尝试过这样的事情，但它只适用于一个图像上传：

<div id="file1">
  <%= f.submit "Crop1" %><br />
  <input type='file' onchange="readURL(this);" />
  <img id="img_prev" src="#" alt="your image" />
  <script>
      function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();

              reader.onload = function (e) {
                  $('#img_prev')
                          .attr('src', e.target.result)
                          .width(150)
                          .height(200);
              };

              reader.readAsDataURL(input.files[0]);
          }
      }
  </script>
</div>

Answer 1

对所有div重复使用相同的代码并标记三个不同的位置以显示图像。以下内容应该有效。

<script>
  function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
              $(input).parent().find('.img_prev') //finds the parent div and gets the img_prev contained inside
                      .attr('src', e.target.result)
                      .width(150)
                      .height(200);
          };

      reader.readAsDataURL(input.files[0]);
    }
  }
</script>
<div id="file1">
  <%= f.submit "Crop1" %><br />
  <input type='file' onchange="readURL(this);" />
  <img class="img_prev" src="#" alt="your image" />
</div>
<div id="file2">
  <%= f.submit "Crop1" %><br />
  <input type='file' onchange="readURL(this);" />
  <img class="img_prev" src="#" alt="your image" />
</div>
<div id="file3">
  <%= f.submit "Crop1" %><br />
  <input type='file' onchange="readURL(this);" />
  <img class="img_prev" src="#" alt="your image" />
</div>

如何使用轨道形式的附加按钮显示多个图像预览＆amp;蜻蜓

1 个答案: