javascript Blueimp Jquery 文件上传：不显示缩略图预览图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10971662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blueimp Jquery File Upload : Doesn't show thumbnail preview image
提问by Amit Patel
I used Blueimp jQuery File Uploadin my Rails application. When user select files, I want to show thumbnail of the image and the name of the image before uploading files to server.
我在 Rails 应用程序中使用了Blueimp jQuery File Upload。当用户选择文件时，我想在将文件上传到服务器之前显示图像的缩略图和图像的名称。
I have been referring the demoto customize this plugin. I am able to print name of the file on the screen but not able to show thumbnail.
我一直在参考演示来自定义这个插件。我可以在屏幕上打印文件名，但无法显示缩略图。
Here is the generated html
这是生成的html
<!DOCTYPE html>
<html>
<head>
<title>Fileupload</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"></script>
<script src="/assets/load-image.min.js?body=1" type="text/javascript"></script>
<script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" />
</head>
<body>
<div class="files">
<form action="/users" class="upload" id="fileupload" method="post">
<input id="user_photo" name="user[photo]" type="file" />
<div>Upload files</div>
</form>
<table class="upload_files"></table>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>${name}</span></td>
</tr>
</script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('#fileupload').fileupload({
add: function (e, data) {
console.log('add');
$.each(data.files, function (index, file) {
console.log('Added file: ' + file.name);
//alert($('#tmpl-demo').tmpl(data));
$('#template-upload').tmpl(data.files).appendTo('.upload_files');
});
var jqXHR = data.submit()
.success(function (result, textStatus, jqXHR) {/* ... */})
.error(function (jqXHR, textStatus, errorThrown) {/* ... */})
.complete(function (result, textStatus, jqXHR) {
console.log("complete");
//$('.upload_files').append('<tr><td>'+ result +'</td></tr>');
});
},
progress: function (e, data) {
console.log('progress');
},
start: function (e) {
console.log('start');
},
done: function (e) {
console.log('done');
}
}).bind('fileuploadadd', function (e, data) {
console.log('fileuploadadd');
}).bind('fileuploadprogress', function (e, data) {
console.log('fileuploadprogress');
}).bind('fileuploadstart', function (e) {
console.log('fileuploadstart');
}).bind('fileuploaddone', function (e) {
console.log('fileuploaddone');
});
});
</script>
</body>
</html>
I compare the html generated after selecting files. The only difference is demo application has <canvas height="72" width="80"></canvas>element within <td class="preview"><span class="fade"></span></td>which is missing in my application.
我比较了选择文件后生成的html。唯一的区别是演示应用程序具有我的应用程序中缺少的<canvas height="72" width="80"></canvas>元素<td class="preview"><span class="fade"></span></td>。
It looks like some configuration problem. Would anyone please help me to configure it properly to show thumbnail as soon as user selects images from the disk?
看起来像一些配置问题。任何人都可以帮助我正确配置它以在用户从磁盘中选择图像后立即显示缩略图吗？
采纳答案by Ivo Renkema
Those previews are not part of the basic version. They are part of the "additional plugin providing a complete user interface (jquery.fileupload-ui.js)."
这些预览不是基本版本的一部分。它们是“提供完整用户界面的附加插件 (jquery.fileupload-ui.js)”的一部分。
So you have to include those js files, and you probably need some HTML wrappers.
所以你必须包含那些 js 文件，而且你可能需要一些 HTML 包装器。
Check out the source HTML of the demo, because it is included in that demo.
查看演示的源 HTML，因为它包含在该演示中。
回答by EricP
Place this inside your add(e, data) callback function, adjusting for your own html elements accordingly:
把它放在你的 add(e, data) 回调函数中，相应地调整你自己的 html 元素：
$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');
The URL.createObjectURL function is documented here.
URL.createObjectURL 函数记录在此处。
回答by Larissa Savchekoo
Edit function _renderPreviews in file jquery.fileupload-ui.js
编辑文件 jquery.fileupload-ui.js 中的函数 _renderPreviews
_renderPreviews: function (data) {
data.context.find('.preview').each(function (index, elm) {
$(elm).append(data.files[index].preview);
$(elm).append('<img width="90" src="' + URL.createObjectURL(data.files[0]) + '"/>');
});
},
