上传多张图片 Cloudinary - Javascript

Cloudinary是一个基于云端的图像和视频管理平台，提供了丰富的API和SDK，支持在多平台、多种语言下集成使用。

在Javascript中，通过使用Cloudinary官方提供的SDK，我们可以轻松地将多张图片上传到云端。

准备工作

在使用Cloudinary的SDK之前，我们需要进行以下准备工作：

1. 注册Cloudinary账号，并创建一个Cloudinary Cloud。

2. 在Cloudinary Cloud中创建API key和API secret，并记录下来。

3. 在使用SDK的页面中引入Cloudinary Javascript SDK。

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.11.0/cloudinary-core-shrinkwrap.js"></script>

使用SDK上传多张图片

在引入SDK后，我们可以使用以下代码上传多张图片：

<input type="file" id="fileupload" name="fileupload" multiple>
<div id="result"></div>

<script>
$(function () {
    $('#fileupload').fileupload({
        url: 'https://api.cloudinary.com/v1_1/<CLOUD_NAME>/image/upload',
        dataType: 'json',
        formData: {'upload_preset': '<UPLOAD_PRESET>'},
        // Multiple file upload callback.
        done: function (e, data) {
             $.each(data.result.resources, function (i, resource) {
                $('#result').append(createImage(resource.secure_url));
             });
        },
        // Single file upload callback.
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#result').text('Uploading... ' + progress + '%');
        }
    });
    function createImage(url) {
        var image = document.createElement('img');
        image.src = url;
        return image;
    }
});
</script>

在使用SDK上传图片时，需要指定以下参数：

• url：上传图片的API地址，这里需要替换为自己Cloudinary Cloud的CLOUD_NAME。

• dataType：返回数据类型，这里我们指定为json。

• formData：表单数据，这里我们需要替换为自己Cloudinary Cloud的UPLOAD_PRESET。

• done：多张图片上传完成之后的回调函数，将返回所有上传成功的资源URL，并将其显示在页面中。

• progressall：单张图片上传进度回调函数，在上传过程中显示上传进度。

总结

通过以上介绍，我们可以轻松地使用Cloudinary的Javascript SDK上传多张图片到云端，实现了图片的快速管理和托管。同时，Cloudinary提供了更多强大的API和SDK，可满足各种不同场景下的需求。