Показать предварительный просмотр изображения после выбора вложения, используя скрепку

Question

Я пытаюсь использовать скрепку для прикрепления нескольких изображений и предварительного просмотра любого прикрепленного изображения перед отправкой формы.Кто-нибудь уже сделал это, или кто-нибудь может подсказать мне, как это можно сделать?Я знаю, что это потребует использования jQuery и AJAX, но я понятия не имею, где искать прикрепленное изображение до отправки формы.Спасибо.

Answer 1

Вы не можете использовать AJAX для загрузки файлов.К сожалению, браузеры не поддерживают передачу через XHR.Я бы предложил добавить iframe (который также делают все гемы / плагины, которые позволяют загружать асинхронные изображения) и добавить в него выгрузку.Когда изменяется ввод файла, измените цель главной формы на имя iframe, отправьте его и дождитесь загрузки этого iframe.

Это будет примерно так:

<iframe name="image_preview" id="image_preview" src="some_blank_page" onload="show_image_preview()"></iframe>

и

function show_image_preview() {
  // read content here. Note: this function is also called when the some_blank_page is loaded!
  var data = window.image_preview.document;
  if (data && data.getElementById("preview")) {
    // now either do something with the preview or just place the iframe so it
    // is already positioned correctly
  }
}

function file_field_changed() {
  var form = $('..');
  var original_action form.action;
  form.action = "special_preview_path";
  form.target = "image_preview";
  form.submit();

  form.action = original_action;
}

Пусть ваш special_preview_path возвращает предварительный просмотр внутри

. Вы также можете создать iframe в событии onchange и поместить его под каждым из полей ввода файла.

Надеюсь, это имеет смысл!Просто дайте мне знать, если вам нужна дополнительная информация об этом.

Answer 2

Обернуть тег изображения в class = "target"

<div class="target">
  <img class="card_image" src="">
</div>

Добавить ниже слушателя в свой файл js

$(document).on('change', 'input[type="file"]' ,function(event) {
  var obj_custom = this;
  var files = event.target.files;
  var image = files[0]
  var reader = new FileReader();
  reader.onload = function(file) {
    var img = new Image();
    img.src = file.target.result;
    img.width=84;
    $(obj_custom).siblings('.target').html(img);
  }
  reader.readAsDataURL(image);
});

Answer 3

Я сталкивался с этой проблемой несколько раз и наконец нашел рабочее (несколько) простое решение.Я не утверждаю, что этот код идеален, но он работает.

edit.html.erb

<%= image_tag "ajax-loader.gif", class: "ajax-loader" %>

<div class="image_preview">
  <% if resource.picture.url %>
    <%= image_tag resource.picture.url %>
  <% end %>
</div>

<iframe id="upload_target" name="upload_target" style="display: none" onLoad="onload_test()"></iframe>

registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  def upload_image_preview
    # sleep 3.seconds # for testing how delay looks
    @user = User.find(params[:id])
    @user.update_attributes(preview_picture: params[:user][:picture])
    render text: ""
  end

  def get_image_preview
    @user = User.find(params[:id])
  end
end

user_image_preview.js

var first_pass = true;

function onload_test() {
  if (first_pass == false) {
    $.getScript("/users/5/get_image_preview.js");
  } else {
    first_pass = false;
  }
  $(".ajax-loader").hide();
  $(".image_preview").show();
}

$(function() {
  $("input[type=file]").change(function(){
    var form = $("form#edit_user");
    var original_action = form.attr("action");

    form.attr("action", "/users/5/upload_image_preview");
    form.attr("target", "upload_target");
    form.submit();

    form.attr("action", original_action);
    form.attr("target", "");

    $(".ajax-loader").show();
    $(".image_preview").hide();
  });
});

Примечание: Я жестко запрограммировал некоторые значения URL.Это было только для отладки, у меня будут атрибуты данных в теге file_field, которые сообщат моему javascript, по какому URL-адресу разместить изображение.1025 *