Cloudinary jQuery File Upload - 选择后图像未上传答案

【问题标题】：Cloudinary jQuery File Upload - image not uploading after selectionCloudinary jQuery File Upload - 选择后图像未上传
【发布时间】：2017-03-12 11:45:08
【问题描述】：

我正在尝试测试 Cloudinary Uploader（通过 jquery 和 PHP）。我按照那里的说明进行操作： http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

我有兴趣让它作为浏览器上传（而不是服务器端）工作。

我的最终 HTML/脚本文本如下（我放了一些 XXXX）。

<html>
        <head>
            <title></title>
            <script src="js/jquery-3.1.1.min.js"></script>
            <script src='js/jquery.ui.widget.js' type='text/javascript'></script>
            <script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
            <script src='js/jquery.fileupload.js' type='text/javascript'></script>
            <script src='js/jquery.cloudinary.js' type='text/javascript'></script>
        </head>
<body>
<script type='text/javascript'>
$.cloudinary.config({"api_key":"XXXXX","cloud_name":"XXXXX"});
</script>

<form action="uploaded.php" method="post">
      <input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>
</body>
</html>

我只是单击“浏览...”按钮并选择一个文件，但没有任何反应。我也打开了 Firefox 控制台，但我也没有看到任何操作。

据我了解，表格应在选择文件后自动提交。正确的？如果没有，我应该怎么做才能将文件提交给 Cloudinary？

什么让我无法理解？

【问题讨论】：

标签： javascript php jquery file-upload cloudinary

【解决方案1】：

您还必须初始化输入字段。尝试添加以下代码：

$('.cloudinary-fileupload').cloudinary_fileupload();

确保最后加载此行，因此要么将其放在 HTML 的末尾，要么将其放在 $( document ).ready() 块中。

【讨论】：

能否请您指出提到这一点的官方文档？
请查看：github.com/cloudinary/cloudinary_js/blob/master/README.md#setup

【解决方案2】：

在文件输入上附加这个：

onchange="this.form.submit();"

更改这行代码：

<form action="uploaded.php" method="post">
      <input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>

到：

<form action="uploaded.php" method="post">
      <input onchange="this.form.submit();" class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>

【讨论】：

文件输入由集成到Cloudinary的PHP函数构建： $cors_location)); ?> 上传的.php 也在他们的例子中，它对我的情况没有任何价值。