FileAPIでのプレビューに関して。

Question

javascript初心者です。

FileAPIを使用して画像アップロードする時にプレビューさせたいのですが、上手くいきません。
いろいろ調べながら進めているのですが、一度見てもらいたいです。

宜しくお願いします。

コード
$("#image").change(function() {
    var file = this.files[0];

    var reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = function() {
      $("#main_preview").attr('src', reader.onload);
  }
});

コード
= form_for(@sample, html:{class: 'container'}) do |f|
  .col-md-8.col-md-offset-2
    %header.row.user-nav.row
      .col-md-12
        = f.text_field :title
    .row
      = f.fields_for :pictureimages do |picture|
        .col-md-12
          .cover-image-upload
            = picture.file_field :image
            %img#main_preview{src: ""}
        ↑ここに画像をプレビューさせたい
            = picture.hidden_field :role, value: :main

コード
/*-- preview_image --------------------------------------------- */
.image-upload img, .cover-image-upload img {
  display: none;
  width: 100%;
  height: 100%;
}

.image-upload #main_preview, .cover-image-upload #main_preview {
  display: block;
}

Comments

[kei344]

「上手くいきません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Answer 1

質問者さんのコードはよく見ないまま回答してすみませんが、以下のような感じでプレビューできれば良いのでしょうか？

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

Comments

[nenenenone]

そうです！