3

我正在使用cloudinary并遵循这里的所有内容：http: //cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

这是我的观点haml：

= form_tag items_path do
  = cl_image_upload_tag(:image_id, :crop => :limit, :width => 1000, :height => 1000)
  = submit_tag 'Submit'

我已经检查并加载了所有 cloudinary javascript。该按钮正在将文件上传到 cloudinary，我的 chrome 控制台显示：

XHR finished loading: "https://api.cloudinary.com/v1_1/hhfk6ki1i/auto/upload". jquery.js:8417
send jquery.js:8417
jQuery.extend.ajax jquery.js:7969
send jquery.fileupload.js:600
$.widget._onSend jquery.fileupload.js:656
newData.submit jquery.fileupload.js:695
$.widget.options.add jquery.fileupload.js:137
$.Widget._trigger jquery.ui.widget.js:278
(anonymous function) jquery.fileupload.js:698
jQuery.extend.each jquery.js:612
$.widget._onAdd jquery.fileupload.js:688
$.widget._onChange jquery.fileupload.js:752
jQuery.event.dispatch jquery.js:3064
elemData.handle.eventHandle

我希望我的按钮在选择文件后显示上传文件的名称。多亏了 cloudinary 插件，这是应该发生的事情，还是我应该实现所有 Javascript 来捕获该事件并更改我的上传标签？

我说的是这个按钮，它总是显示“未选择文件”（即使文件已上传并在 Cloudinary 中可用）：

在此处输入图像描述

顺便说一句：如果它是相关的。我没有使用carrierwave，也没有Attachinary因为我使用couchrest_model

4

2 回答 2

4

可以通过运行禁用在上传开始时替换输入字段的行为：

$('.cloudinary-fileupload').fileupload('option', 'replaceFileInput', false);

上传完成时调用 cloudinarydone 的回调。如果您想在字段开始时隐藏字段（当输入字段被重置时），您可以使用：

$('.cloudinary-fileupload').bind('fileuploadchange', function() { $(this).hide()})
于 2013-01-18T12:45:00.070 回答
2

当使用基于 jQuery 的直接图像从浏览器上传到 Cloudinary 时，上传过程会在使用文件输入字段选择或拖动图像后立即开始。您的表单将使用直接上传的图像的标识符进行更新。

默认情况下，上传完成后会显示一个新的文件输入字段，所以不显示文件名。

您可以绑定到事件，如相关博客文章下的cloudinarydone示例代码所示。收到此事件时，您可以隐藏文件输入字段并显示上传图像的预览缩略图。Other development frameworks and advanced usage

于 2013-01-16T17:53:19.163 回答