我需要在提交表单之前预览图像。我使用 Rails 3,需要与浏览器兼容的东西。有什么想法可以实现吗?
问问题
10096 次
2 回答
32
所以!:) 主要思想是使用 FileReader Javascript 类,这对于您需要做的事情非常方便。
您只需在文件输入上监听“更改”事件,然后调用将使用 FileReader 类的“readAsDataURL()”方法的方法。然后你只需要用方法的返回结果填充“预览img标签”的来源......
我给你写了一个简单的 jsFiddle来实现你想要的。你可以在下面看到我的代码:
<!-- HTML Code -->
<div class="upload-preview">
<img />
</div>
<input class="file" name="logo" type="file">
//JS File
$(document).ready(function(){
var preview = $(".upload-preview img");
$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.attr("src", image_base64);
};
reader.readAsDataURL(file);
});
});
在 Mozilla 文档中,您还有另一个示例(肯定更健壮)。此解决方案应适用于 Safari(版本 6.0+)。
这是我知道在提交表单之前预览图像的唯一方法,但我认为这是一种很常见的方法。当然,这与 Ruby On Rails 无关,因为我们在这里只使用 Javascript... 仅使用 Rails 是不可能的,因为您必须在渲染之前上传图像。(因为 Rails 是服务器端,我想你完全理解为什么。:))
于 2013-08-12T17:18:06.090 回答
1
HTML:
<input type="file">
<div id="image_preview"></div>
JS(需要 jquery):
$(document).ready(function(){
$('input[type="file"]').change(function(){
var image = window.URL.createObjectURL(this.files[0]);
$("#image_preview").css("background-image", "url(" + image + ")");
});
});
于 2018-10-30T15:13:44.873 回答