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

时间:2017-04-07 09:09:43

标签: javascript jquery file-upload cloudinary

我使用jQuery文件上传将图像上传到我的服务器。现在我想测试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一起玩,但仍然没有成功。我搜索了Google和Stackoverflow但找不到我需要的任何内容。

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

我需要一种方法来组合脚本..任何人都可以帮助我吗?

更新

我通过运行第一个脚本并使用asp.net将Upload.ashx上传到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 个答案:

答案 0 :(得分:0)

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

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