Blueimp Jquery文件上传：不显示缩略图预览图像 [英] Blueimp Jquery File Upload : Doesn't show thumbnail preview image
问题描述
我在Rails应用程序中使用了 Blueimp jQuery文件上传。当用户选择文件时，我想在上传文件到服务器之前显示图像的缩略图和图像的名称。
我一直指的是 demo 来定制这个插件。我能够在屏幕上打印文件的名称，但无法显示缩略图。
以下是生成的html
<！DOCTYPE html>
< html>
< head>
< title> Fileupload< / title>
< link href =/ assets / jquery.fileupload-ui.css？body = 1media =all =stylesheettype =text / css/>
< script src =/ assets / jquery.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery_ujs.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery.ui.widget.js？body = 1type =text / javascript>< / script>
< script src =/ assets / application.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery.tmpl.js？body = 1type =text / javascript>< / script>
< script src =/ assets / load-image.min.js？body = 1type =text / javascript>< / script>
< script src =/ assets / canvas-to-blob.min.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery.fileupload.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery.fileupload-fp.js？body = 1type =text / javascript>< / script>
< script src =/ assets / jquery.fileupload-ui.js？body = 1type =text / javascript>< / script>
< meta content =authenticity_tokenname =csrf-param/>
< meta content =Akp8GLPQ + DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY =name =csrf-token/>
< / head>
< body>
< div class =files>
< form action =/ usersclass =uploadid =fileuploadmethod =post>
< input id =user_photoname =user [photo]type =file/>
< div>上载档案< / div>
< / form>
< table class =upload_files>< / table>
< / div>
<！ - 显示可上传文件的模板 - >
< script id =template-uploadtype =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 / javascriptcharset =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'）;
}）; $
.error（function（jqXHR，textStatus，errorThrown） ）{$ * $ b .complete（function（result，textStatus，jqXHR）{
console.log（complete）;
// $（'。 append（'< tr>< td>'+ result&'< / td>< / tr>'）;
}）;
}，
progress：function（e，data）{
console.log（'progress'）;
}，
start：function（e）{
console.log（'start'）;
}，
完成：function（e）{
console.log（'done'）; （'fileuploadadd'，function（e，data）{
console.log（'fileuploadadd'）;
}）。bind（'fileuploadprogress' ，函数（e，data）{
console.log（'fileuploadprogress'）;
}）。bind（'fileuploadstart'，function（e）{
console.log（'fileuploadstart' ）;
}）。bind（'fileuploaddone'，function（e）{
console.log（'fileuploaddone'）;
}）;
}）;
< / script>
< / body>
< / html>
我比较选择文件后生成的html。演示应用程序的唯一区别是< code>< canvas>< / canvas>< / code> td class =preview>< span class =fade>< / span>< / td>
它看起来像一些配置问题。有人会请帮助我正确地配置它，以显示缩略图，只要用户从磁盘上选择图像？
这些预览是不是基本版本的一部分。他们是额外的插件提供了一个完整的用户界面（jquery.fileupload-ui.js）的一部分。
所以你必须包括那些js文件，你可能需要一些HTML包装器。
查看演示的源代码HTML，因为它包含在演示中。 b $ b
I used Blueimp jQuery File Upload in 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.
I have been referring the demo to 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
<!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.
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?
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)."
So you have to include those js files, and you probably need some HTML wrappers.
Check out the source HTML of the demo, because it is included in that demo.
这篇关于Blueimp Jquery文件上传：不显示缩略图预览图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
