Blueimp Jquery文件上传:不显示缩略图预览图像
Blueimp Jquery File Upload : Doesn't show thumbnail preview image
我在 Rails 应用程序中使用了 Blueimp jQuery File Upload。当用户选择文件时,我想在将文件上传到服务器之前显示图像的缩略图和图像的名称。
我一直在参考演示来自定义此插件。我可以在屏幕上打印文件的名称,但无法显示缩略图。
这是生成的 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>
我比较选择文件后生成的 html。唯一的区别是演示应用程序中<canvas height="72" width="80"></canvas>
<td class="preview"><span class="fade"></span></td>
我的应用程序中缺少的元素。
它看起来像一些配置问题。有人可以帮我正确配置它以在用户从磁盘中选择图像后立即显示缩略图吗?
把它放在你的add(e,data)回调函数中,相应地调整你自己的html元素:
$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');
URL.createObjectURL 函数记录在此处。
这些预览不是基本版本的一部分。它们是"提供完整用户界面(jquery.fileupload-ui.js)的附加插件"的一部分。
所以你必须包含这些js文件,你可能需要一些HTML包装器。
查看演示的源 HTML,因为它包含在该演示中。
编辑函数_renderPreviews文件 jquery.fileupload-ui.js
_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]) + '"/>');
});
},
相关文章:
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 用较大的图像交换缩略图
- 不应选择缩略图优先图像
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 缩略图图像滑块
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 图像库缩略图滑块
- 缩略图库的XML数据图像绑定
- Jquery循环页面缩略图图像-保留主图像链接标签
- 从缩略图图像显示屏幕范围的版本
- 在网格中显示缩略图图像,并扩展预览
- 如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
- 如何将交替类添加到缩略图图像的动态提要
- 当点击不同的2个缩略图图像时,页面跳转
- Jquery/Javascript缩略图图像问题
- 如何使图片库将显示图像更改为缩略图图像?
- Woocommerce缩略图图像交换
- Photowipe缩略图图像大小问题 - 尝试调整缩略图大小以获得统一的外观
- 如何将缩略图图像附加到 DIV 时以特定模式定位它们
- 在chrome浏览器中,它如何显示全尺寸的图像url,当用户在我的网站上拖动缩略图图像