Я использовал рельсы в течение последних нескольких дней и хотел узнать, какой лучший способ показать предварительный просмотр изображений перед загрузкой в рельсы и несущую.
Я столкнулся с несколькими вариантами, например, используя загрузку файла plupload или jquery или с помощью функции uploadify.
Если вам нужно только предварительный просмотр изображения в форме перед загрузкой, вы (как я) увидим, что плагин JQuery Upload просто слишком сложный и не так прост в запуске (я смог просмотреть предварительный просмотр, но тогда я не удалось загрузить изображение).
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
Это простой и быстрый код.
Я помещаю код здесь на всякий случай, когда источник умирает:
Script:
<!-- Assume jQuery is loaded -->
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
В HTML:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
Вы можете использовать плагин jQuery File Upload, который является полным решением, но если вам нужно что-то менее надежное, вы также можете попробовать использовать FileReader, например this, так что вы можете настроить функциональность, что вам нужно.
В соответствии с документами image_cache отображается то, что вы загружаете.
<%= f.hidden_field :image_cache %>