Question

我正在做一个网络应用，今晚，我尝试预览我的帖子的上传图片。就像照片一样：

从那以后，我必须刷新我的：编辑和：新页面帖子。如果我不这样做，页面就会被冻结！

views / posts / _form：

＆＃13;

<div class= "posts-wrapper">
  <div class= "post">
    <div class= "post-body">
      <div class= "image-wrap">
        <%= image_tag 'placeholder.jpg', id: 'image-preview', class: 'img-responsive' %>
        <%= simple_form_for @post, html: { multipart: true } do |f| %>
        </div>
          <div class= "row">
            <div class= "col-md-12.text-center">
              <%= f.error_notification %>
              </div>

          <div class= "container-fluid">

            <div class= "form-group.text-center">
              <h4> Upload an image (this is required): </h4>
              <%= f.input :image, label: false, input_html: { onChange: 'loadFile(event)' } %>
              </div>

            <div class= "form-group.text-center">
              <%= f.input :caption, label: false, placeholder: 'Add your caption' %>
              </div>

            <div class= "form-group.text-center">
              <%= f.button :submit, class: 'btn-success btn-block' %>

              </div>

            </div>
          </div>
          
      </div>
  </div>
  <%end%>
</div>

＆＃13;

assets / js / posts.js：

＆＃13;

var loadFile = function(event) {  
  var output = document.getElementById('image-preview');
  output.src = URL.createObjectURL(event.target.files[0]);
};

＆＃13;

助手/ appli：

＆＃13;

def form_image_select(post)  
  return image_tag post.image.url(:medium),
                   id: 'image-preview',
                   class: 'img-responsive' if post.image.exists?
  image_tag 'placeholder.jpg', id: 'image-preview', class: 'img-responsive'
end

＆＃13;

我如何解决这个问题？我尝试了很多东西，甚至在用户到达时自动刷新页面，但它太脏了！

Answer 1

你能试试这个功能吗？

我将URL.createObjectURL替换为FileReader来电。我认为您的网页已冻结，因为该对象太重了。

var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var output = document.getElementById('image-preview');
        output.src = e.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
};

$("#file").on("change", function(e) {
    loadFile(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image-preview" />
<input type="file" id="file" value="input" />

编辑：

posts.js中的

（在jquery导入之后）：

var loadFile = function(event) {  
  var output = document.getElementById('image-preview');
  output.src = URL.createObjectURL(event.target.files[0]);
};

$(document).ready(function() {
    $("#file").on("change", function(e) {
        loadFile(e);
    });
});

我需要在重定向之前刷新，为什么？

1 个答案: