Cloudinary 上传文件但按钮仍显示“未选择文件”

Question

我正在使用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

Answer 1

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

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

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

$('.cloudinary-fileupload').bind('fileuploadchange', function() { $(this).hide()})

Answer 2

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

上传完成后默认显示一个新的文件输入框，所以不显示文件名。

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