ruby-on-rails - 选择附件后显示图像预览，使用 Paperclip

Question

我正在尝试使用回形针附加多个图像，并在提交表单之前显示附加图像的预览。有没有人已经这样做了，或者有人可以建议我如何做到这一点？我知道这将需要使用 jQuery 和 AJAX，但我不知道在提交表单之前在哪里查找附加图像。谢谢。

Answer 1

您不能使用 AJAX 进行文件上传。遗憾的是，浏览器不支持使用 XHR 传递它。我的建议是添加一个 iframe(所有允许异步图像上传的 gem/插件也这样做)并向其添加卸载。当文件输入发生变化时，将主窗体的目标更改为iframe的名称，提交并等待iframe的onload。

应该是这样的:

<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 在

中返回预览

您还可以在 onchange 事件中创建 iframe 并将其放置在每个文件输入字段的下方。

我希望这是有道理的!如果您需要更多相关信息，请告诉我。