使用 jquery 文件上传将图像上传到 cloudinary 和我自己的服务器

Question

我使用 jQuery File Upload 将图像上传到我的服务器。现在我想测试 Cloudinary，但在测试期间我仍然想将所有图像上传到我自己的服务器。

我用于将图像上传到服务器的代码是：

$(function () {
    $('#fileupload').fileupload({
        url: '/Upload/Upload.ashx',
        maxFileSize: 15000000,
        acceptFileTypes: /(\.|\/)(jpe?g)$/i,
        dataType: "json",
        autoUpload: true,
        start: function (e) {
            $('#progress').removeClass('hidden');
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        },
        always: function (e) {
            $('#progress').addClass('hidden').fadeOut("slow");
        },
        done: function (e, data) {
            $('#progress').addClass('hidden');
            parent.location.reload();
        },
    })
    .bind('fileuploadadd', function (e, data) {
        $('#error').addClass('hidden');
    })
    .bind('fileuploadprocessfail', function (e, data) {
        var currentFile = data.files[data.index];
        if (data.files.error && currentFile.error) {
            $('#error').html('error: ' + data.files[data.index].error);
            $('#error').removeClass('hidden');
        }
    })
});

使用Cloudinary上传的代码是：

$('#fileupload').unsigned_cloudinary_upload('test12345',
    { cloud_name: 'test' }
).bind('cloudinarystart', function (e, data) {
    $('#progress').show();
}
).bind('cloudinaryprogress', function (e, data) {
    $('.progress-bar').css('width',
        Math.round((data.loaded * 100.0) / data.total) + '%');
}
).bind('cloudinarydone', function (e, data) {
    $('#progress').hide();
    parent.location.reload();
});

现在我正在寻找一种方法来同时或彼此之后进行。

我尝试了什么？

我尝试将来自 Cloudinary 的代码放入 Jquery 文件上传代码的“完成”部分，但这不起作用。我还尝试先销毁 Fileupload，然后启动 Cloudinary 代码，但也无法正常工作。我尝试使用 Jquery when/then，但仍然没有成功。我搜索了 Google 和 Stackoverflow，但找不到我需要的任何东西。

上传的第一部分 (FileUpload) 正在运行。但 Cloudinary 部分不是。控制台窗口中没有错误。

我需要一种组合脚本的方法.. 谁能帮帮我？

更新

我修复了它，只运行第一个脚本并在 Upload.ashx 中使用 asp.net 上传到 Cloudinay。这是有效的。

public static UploadResult UploadImage(string tags, string fileName, Stream stream)
{
    var uploadParams = new ImageUploadParams()
    {
        File = new FileDescription(fileName, stream),
        PublicId = fileName,
        Tags = tags,
        UploadPreset = "test12345",
    };

    var result = new Cloudinary(GetAccount()).Upload(uploadParams);
    return new UploadResult
    {
        uri = result.SecureUri,
        error = result.Error != null ? result.Error.Message : string.Empty
    };
}

Answer 1

当您说“不工作”时，您的意思是在成功上传后，cloudinarydone 事件根本没有触发？因为它应该，并且您应该能够获取它的详细信息并将其传递给您的服务器。这是一个例子： https://jsfiddle.net/taragano/70dd9vd4/

或者，这可能是更推荐的方法，您可以先将图像上传到您的服务器，然后进行服务器端上传，即让您的服务器将图像直接上传到您的 Cloudinary 帐户。