我已经使用了过去几天的轨道,想知道什么是显示上传中轨及carrierwave前图像预览最好的办法。
我碰到几个选项来喜欢使用plupload或jQuery的文件上传或使用uploadify。
我已经使用了过去几天的轨道,想知道什么是显示上传中轨及carrierwave前图像预览最好的办法。
我碰到几个选项来喜欢使用plupload或jQuery的文件上传或使用uploadify。
如果你只需要图像预览在上传前一种形式,你(我)会看到的JQuery上传插件实在太多复杂,不是那么容易正常运行(我能看到的预览,但后来我做不到上传的图片)。
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
它的简单和快速的代码。
我把这里的代码只是在源死亡情况:
脚本:
<!-- 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的文件上传 ,它是一个完整的解决方案,但如果你需要不太可靠的东西,你也可以尝试使用的FileReader直接,像这样 ,所以你可以自定义任何你需要的功能。
根据该文件image_cache
正显示出您所上传的内容。
<%= f.hidden_field :image_cache %>