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中可用）：

BTW：如果相关的话。我没有使用carrierwave或Attachinary，因为我使用couchrest_model

Answer 1

可以通过运行以下命令禁用上载开始时替换输入字段的行为：

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

上传完成后会调用cloudinary的回调。如果要在字段启动时立即隐藏该字段（重置输入字段时），您可以使用：

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

Answer 2

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

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

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