Cloudinary jQuery 直接上传问题答案

【问题标题】：Cloudinary jQuery Direct Upload issueCloudinary jQuery 直接上传问题
【发布时间】：2014-10-21 19:47:31
【问题描述】：

我正在实施 Cloudinary Jquery Upload。从我的文件上传网页，如果我浏览到另一个网站（google.com，或任何外部网站），然后单击浏览器上的后退按钮进入同一文件上传页面，则上传失败。

我得到的错误信息是（来自 Firebug）：

400 错误请求 {"error":{"message":"上传预设使用未签名上传时必须指定上传预设”}}

我没有在 Cloudinary 管理控制台上启用未签名上传因为我的意图是签名上传

这是在后端为 data-form-data 创建的 JSON 数据：

{"timestamp":1409146953,"callback":"http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html","signature":"19071a3e822eed51238454e359589f52cccca042","api_key":"224456847515364"}

下面是javascript和输入HTML：

   <script type="text/javascript”>
     $.cloudinary.config({cloud_name:'dashy', api_key:’XXXXXXXXXXXXXXX'});
   </script>
   <input name="file" type="file" id="uploadinput" class="cloudinary-fileupload" data-cloudinary-field="image_upload"
 data-form-data="" ></input>
   <script>
       $.ajax({
             url: '/filer',
             type: 'POST',
             success: function(response){
                    $('#uploadinput').attr('data-form-data', response);
             }
        });
   </script>

这是生成 JSON 的 Ruby 后端：

 post '/filer' do
      ts = Time.now.getutc.to_time.to_i.to_s
      secret="XXXXXXXXXXXXXXXXXXXXXX"
altogether="callback=http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html&timestamp="+ts+secret
      sig=Digest::SHA1.hexdigest altogether
      ts = Time.now.getutc.to_time.to_i
      {:timestamp => ts, :callback => "http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html", :signature => sig, :api_key =>"XXXXXXXXXXXXXXXX"}.to_json
 end

请帮助我理解我做错了什么？

【问题讨论】：

标签： cloudinary

【解决方案1】：

虽然您的解决方案可能有效，但更理想的方法是更新上传参数以调用 $(...).fileupload({formData: data})，其中 data 是参数哈希（不是 JSON 序列化）。了解更多信息： http://support.cloudinary.com/entries/24950218-Why-is-updating-a-cloudinary-fileupload-field-dynamically-not-working-

【讨论】：

你能给我一个参数hash的例子吗？
您应该传递一个 JSON，例如：{"timestamp":1409836869,"eager":"t_my_transformation","use_filename":1,"unique_filename":1,"signature":"52f06bd404778454dd6dc6973f6ea0d8ef55ca25","api_key":"219441847515364"}。请注意，您还可以使用未签名的上传并使用这些方法为您简化此任务。请参阅以下内容以供参考：github.com/cloudinary/cloudinary_js/blob/master/js/…
看起来我仍然有无法上传的间歇性问题。你能帮助我吗？代码在这里：jsfiddle.net/tschew/oxdmvbew
我听从了你的建议，它可以工作，但问题是如果页面在几分钟内处于非活动状态，签名就会过期并且上传失败。由于我在 document.ready() 部分中使用文件上传（{formData:data}），除非我要求用户刷新页面，否则我无法动态更改 formData。还有其他出路吗？
签名基于时间戳，有效期为1小时。如果窗口可以长时间保持打开状态，您应该确保正在刷新签名。如果它在几分钟后过期，您应该验证给定的时间戳是正确的，并且您的服务器的时钟设置正确。

【解决方案2】：

通过使用以下 sn-ps 强制页面重新加载来使其正常工作（参考：https://stackoverflow.com/a/9217531/3781343 和 http://www.webdeveloper.com/forum/showthread.php?137518-How-to-refresh-page-after-clicking-quot-Back-quot-button）

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

【讨论】：