jQuery Ajax挂起大文件上传

时间:2016-03-16 11:01:10

标签: javascript php jquery ajax

我正在开发一个图像托管网站,它将通过jQuery的ajax将图像发送到服务器。

如果我发送一个大文件,由于一些奇怪的原因,complete选项需要一段时间才能执行任何操作,但在Developer Tools for Chrome中,“网络”选项卡会向我显示请求已完成并返回应返回的内容(在这种情况下,如果图像大于20MB,它将返回"文件太大"以json格式。)

一旦请求完成,告诉ajax完成报告流程的最佳方法是什么,无论文件是否过大或失败?

这是我到目前为止的代码:

$.ajax({
    xhr: function()
    {
        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(evt)
        {
            if(evt.lengthComputable)
            {
                var percentComplete = evt.loaded / evt.total;
                    percentComplete = parseInt(percentComplete * 100);

                $('#btn-upload').fadeOut();
                $('.progress-circle').delay(500).fadeIn('fast');
                progressCircle.animate(percentComplete / 100);
            }
        }, false);

        return xhr;
    },
    url: $('form').attr('action'),
    type: 'POST',
    data: formData,
    dataType: 'json',
    global: false,
    cache: false,
    contentType: false,
    processData: false,
    complete: function(jqXHR)
    {
        if(jqXHR.readyState === 4)
        {
            var result = $.parseJSON(jqXHR.responseText);

            if(jqXHR.status == 422)
            {
                $('.progress-circle').fadeOut('fast', function()
                {
                    $('.errors p').html(result);
                    $('.errors').delay(500).fadeIn('fast');
                });
            }
            else
            {
                window.location.replace(result.url);
            }
        }
    }
}, 'json');

0 个答案:

没有答案