cloudary jQuery文件上传-图片选择后不上传
Cloudinary jQuery File Upload - image not uploading after selection
我正在尝试测试cloudary Uploader(通过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>
我只是点击"浏览…"按钮,选择一个文件,但什么也没发生。我也打开了火狐控制台,但是我也没有看到任何动作。
据我所知,表单应该在选择文件后自动提交。对吧?如果没有,我应该怎么做才能把文件提交给cloudary ?
我忘记了什么?
您还必须初始化输入字段。尝试添加以下代码:
$('.cloudinary-fileupload').cloudinary_fileupload();
确保这一行是最后加载的,所以要么把它放在HTML的末尾,要么把它放在$( document ).ready()
块中。
在文件输入中追加this:
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>
相关文章:
- 从动态创建的html选择中选择所选选项
- 可以'选择单选输入时,不要提交带有JavaScript功能的表单
- 如果选择单选按钮,则显示字段
- 如何取消选择所选选项并将JqueryMobile中选择的值刷新为1st
- 选择单选按钮更新2个输入字段
- 如果选择单选按钮,则显示表单
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 选择单选按钮时显示更新按钮
- 选择单选按钮时显示或隐藏窗体
- 如何使用Greasemonkey自动选择单选按钮
- 如何通过单击选项而不是实际按钮本身来选择单选按钮
- JavaScript - 如果选中任何复选框,请选择单选按钮
- 无法在 jquery 中选择单选按钮
- 禁用选择/复选框 当选择/选中另一个时
- 需要在选择单选按钮上启用提交按钮
- 如何使用JQuery按值选择复选框
- jquery选择复选框选择的值
- 选择单选输入时修改占位符属性
- 取消选中时选择最接近的“从中选择”复选框
- 根据动态值选择和取消选择复选框