Cloudinary jQuery 文件上传 - 选择后图像未上传

Question

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

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

我的最终 HTML/script 文本如下（我放了一些 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>

我只是单击 "Browse..." 按钮和 select 一个文件，但没有任何反应。我也打开了 Firefox 控制台，但我也没有看到任何操作。

据我所知，表格应该会在文件 selection 之后自动提交。正确的？如果没有，我应该怎么做才能将文件提交到 Cloudinary？

什么逃避了我？

Answer 1

在文件输入中追加：

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>

Answer 2

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

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

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

Cloudinary jQuery 文件上传 - 选择后图像未上传

Cloudinary jQuery File Upload - image not uploading after selection

javascript

php

jquery

file-upload

cloudinary