2

私のビューにはさまざまな従業員の詳細が含まれており、それぞれの画像をアップロードして最後に保存する必要があります。保存する前に各画像の画像プレビューを表示したいのですが、ローカルホストパスを使用し、画像プレビューを表示しません。エラーが表示されています： "NetworkError：404 Not Found -localhost：3000 / rails.png"

ビューで

<% @person.each do |person| %>


<td><%= person.name %></td>
<td><%= person.date %></td>
<td><input id="<%= person.id %>"  type='file' class="imageUploader" multiple="true" ></td>

 <td class="image_container"> <img id="image_<%= person.id %>" src="#" alt="Image" width="100" height="100"></td>` here
</tr>
  <% end %>

appliction.jsで::

    $('.imageUploader').change(function() {
 var target_image = $(this).val();
 $(this).parent('td').parent("tr").children('td.image_container').html("<img src="+target_image+">");
 console.log(target_image);
});
4

2 に答える 2

1

ガイズ、もう1つもらった............. `

    FILEFIELD = {}
     $(document).ready(function() {    

     $('.files').change(function() {

        FILEFIELD = $(this)
        var fr = new FileReader;


        fr.onload = function() {
            var img = new Image;
            img.onload = function() {
           var c=$(FILEFIELD).parent("td").parent("tr").children("td").children(".images")[0];
                var ctx=c.getContext("2d");
                ctx.drawImage(img,0,0,50,50);      

         }
            img.src = fr.result;

        };

        fr.readAsDataURL(this.files[0]);

    });
});

そしてついに働く

于 2013-01-11T11:14:04.850 に答える
0

さて、私はあなたが言ったことを試し、私のアプリケーションで画像プレビューを取得しました：

私の見解：

<% if current_user %>
   <p>Welcome <%= current_user.email %></p>
   <tr><input type="file" id="files" name="files[]" multiple />
   <img id="list" src="#" alt="Image" width="100" height="100"></img></tr>
<% end %>


<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>


<script type="text/javascript">
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

上記のように、コードはアップロード前にシングルユーザー画像のプレビューを考慮して私が作成します。ただし、クエリと複数のユーザーの小さなコードを変更することで、複数のユーザーに対して同じことができます。

乾杯！

于 2013-01-10T10:57:00.077 に答える