使用 jQuery 使用 Cloudinary API 直接上传图片
Posted
技术标签:
【中文标题】使用 jQuery 使用 Cloudinary API 直接上传图片【英文标题】：Direct image upload using Cloudinary API using jQuery 【发布时间】：2016-09-09 08:15:39 【问题描述】：我正在尝试使用 jQuery 使用 Cloudinary 图像上传 API 上传图像。我对此一无所知。我正在使用以下代码。 而且我不知道我们在签名参数中使用什么值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.cloudinary.js"></script>
</head>
<body>
<script type="text/javascript">
$.cloudinary.config("api_key":"api_key","cloud_name":"cloud_name");
</script>
<input name="file" type="file" id="uploadinput"
class="cloudinary-fileupload" data-cloudinary-field="image_upload"
data-form-data="" ></input>
<script>
var data = "timestamp": '',
"callback": "http//localhost/cloudinar/index.php?message='file has been uploaded'",
"signature": "",
"api_key": "api_key" ;
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：在与支持人员交谈后，我被定向到this post，它展示了如何使用“unsigned”方法将文件直接上传到 Cloudinary，尽可能简单：
$('.upload_field').unsigned_cloudinary_upload("zcudy0uz",
cloud_name:'demo', tags:'browser_uploads' ,
multiple:true
)
.on('cloudinarydone', function(e, data)
var opts =
format : 'jpg',
width : 150,
height : 100,
crop : 'thumb',
gravity : 'face',
effect : 'saturation:50'
;
$('.thumbnails').append( $.cloudinary.image(data.result.public_id, opts) )
)
.on('cloudinaryprogress', function(e, data)
var W = Math.round((data.loaded * 100.0) / data.total) // %
$('.progress_bar').css('width', W + '%');
);
一位名叫“Maor Gariv”的人还给了我demo page，他回复了我的支持电子邮件。
【讨论】：
【参考方案2】：Cloudinary 的服务器端 SDK 支持自动生成自动包含相应签名的输入字段。 有关更多信息（例如，使用 PHP）： http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser
【讨论】：
我想确切地知道标题是什么“直接图片上传......”而这个答案没有任何帮助.. Cloundinary 上的文档很糟糕。如果我已经有一个输入字段，为什么我想要/需要生成一个输入字段？为什么不能将代码连接到已经存在的元素，然后用 3-5 行代码将数据发送到服务器？为这么简单的事情包括 5 个 js 脚本似乎很疯狂。 服务器端代码可以用一行代码来简化这个。但是，您确实也可以让 Cloudinary 使用您已经添加的输入字段。请注意，data-form-data 的动态 javascript 添加不会像您共享的示例中那样工作。它可以以不同的方式完成。见 - support.cloudinary.com/hc/en-us/articles/…以上是关于使用 jQuery 使用 Cloudinary API 直接上传图片的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Cloudinary jQuery 插件直接从页面上传图片？
使用 jquery 文件上传将图像上传到 cloudinary 和我自己的服务器
如何在 jquery 中向 cloudinary 文件上传（）添加可选参数？