个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
27
4
我用了Blueimp jQuery File Upload在我的 Rails 应用程序中。当用户选择文件时，我想在将文件上传到服务器之前显示图像的缩略图和图像的名称。
我一直在引用 demo自定义此插件。我可以在屏幕上打印文件名，但无法显示缩略图。
这是生成的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 函数 here .
关于javascript - Blueimp Jquery 文件上传 : Doesn't show thumbnail preview image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10971662/
27
4
0
我有 ADT 版本 23.0.4 并安装了 Android 5.0 的 SDK 平台。 我读到 Android 5.0 Lolipop 的 API 级别为 21。但是在 Eclipse 的“新建应用程
视频，电子表格和文档支持在云端硬盘中预览其内容。我正在开发一个Google云端硬盘应用程序，我希望它支持预览其内容，因此Google云端硬盘中是否有任何api可以设置预览缩略图或将其嵌入其中？例如，在
似乎预览停止在Xcode 12上运行!尝试预览SwiftUI文件模板并出现以下错误。任何想法如何解决这一问题？试图清理构建文件夹，删除派生数据并重新启动Xcode无济于事! 在Catalina 10.
我有一个需要预览网络摄像头视频的 Directshow 应用程序，当用户单击“录制”时，它需要开始将视频捕获到文件中。 为此，我创建了一个 Capture Graph，PREVIEW 引脚连接到 RE
我构建了一个人脸检测应用程序，我从 onPreviewFrame 获取帧，进行人脸检测，然后在 surfaceView 上方的 Canvas 上绘制一个圆圈。问题是当 Camera.StartPrev
要遵循哪些准则才能在 CKAN 数据预览工具上很好地预览数据？我正在 CKAN 工作，一直在上传数据或将其链接到外部网站。有些可以很好地预览，有些则不能。我一直在网上研究机器可读性，但找不到任何与 C
我看到其他人在 Xcode 11 和 12 中使用 SwiftUI Previews 发布了问题，但在其他地方没有看到这个问题。 在 Xcode 11 中运行的旧项目在 Xcode 12 中加载，无论
从上一个 Android Studio 2.0 预览升级到 Preview 5 后，我在从 android.support.wearable 导入时遇到了问题> 包。 主应用和 Wear 应用的构建和
我正在使用 Visual Studio 2013 预览版，并且我正在尝试在我的应用程序中使用更少的文件。但是我在右 Pane 中收到编译错误。你可以看看它。有人可以帮我吗？ 最佳答案 您必须使用“Un
我已经找到并阅读了这个 tutorial .确实很好!我故意使用“阅读”这个词。早知道就不来这里问了。 现在:我试图将我读过的内容插入到我的应用程序中。我需要带有静态图像和相机预览控件的不同叠加层。我
我正在分别在Jenkins-X的“预览”和“jx-staging”中使用“jx预览”和“jx升级”命令部署服务。 我想删除与使用jx命令部署的特定微服务关联的资源(如部署，服务，pv和pvc等)。 因
我正在 Visual Studio 11 Developer Preview 中编写应用程序，在应用程序与 reader 一起运行一段时间后出现此错误。InputStreamOptions = Inp
今天我对我的 AOSP 存储库执行了一个repo sync，然后我收到了一些错误。这些是我从终端收到的: From https://android.googlesource.com/platform/
我正在使用 IntelliJ IDEA 2021.2.3 和 JDK 17。我有 Java 17 中的代码片段 pom.xm 4.0.0 org.example funct
我正在使用 IntelliJ IDEA 2021.2.3 和 JDK 17。我有 Java 17 中的代码片段 pom.xm 4.0.0 org.example funct
我在网页上有一个dropzone.js实例，具有以下选项: autoProcessQueue:false uploadMultiple:true parallelUploads:20 maxFiles
有关PowerShell Copy-Item命令的快速问题。我想知道您是否具有目录结构，并且想要覆盖另一个目录结构，是否有一种方法可以在“预览”模式下运行Copy-Item命令。它会将覆盖的文件从目录
我正在尝试实现一个 REST 服务(或者甚至是单个 Servlet)，它允许我快速“预览”传入文件(包含单个文件的多部分请求)。 这个想法是在数据库中解析并存储进入服务的潜在巨大文件的前几行。 我面临
如何创建这样的圆形/椭圆形或圆角相机预览(中间的圆应该是相机预览)？ 伦敦图像代表带有按钮和 View 的其余 UI，因此它必须是可见的，这就是为什么我不能使用像添加 android:backgrou
我有一个 WPF 文本框，并执行以下操作 输入文本“12345” 在 3 和 4 之间移动光标(使用箭头或鼠标点击) 输入 0(因此文本现在为“123045”) 哪个事件/事件参数可以告诉我在位置 4
我是一名优秀的程序员,十分优秀！