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

Posted 2023-03-25

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

【英文标题】：Upload image to cloudinary and to my own server using jquery file upload

【发布时间】：2017-09-02 14:31:00

【问题描述】：

我使用 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 和 ***，但找不到我需要的任何东西。

上传的第一部分 (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
    ;

【参考方案1】：

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

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

【讨论】：

如果我结合这两个脚本，那么第一个（本地）将被执行。第二个（云）根本不运行。我现在已经通过使用 asp.net 而不是 jQuery 上传到 cloudinay 来修复它。这是目前的工作。谢谢。