chromium禁用ajax,页面加载时,jQuery AJAX不会在Chrome / Chromium中启动

在本文中,作者遇到了一个关于AJAX上传进度显示的问题。在Firefox中正常工作的一个表单上传进度条,在Chrome和Chromium中却无法在上传开始时触发。问题在于Chrome在没有通知的情况下更新了窗口状态栏的上传进度。作者寻求帮助,希望通过调整代码来解决这个浏览器兼容性问题。
摘要由CSDN通过智能技术生成

|

场景:我拥有的是一个上传表单,该表单使用nginx uploadProgress模块​​报告上传进度。下面的代码在Firefox中可以正常工作,但是使用Chrome和Chromium时,页面加载时不会触发AJAX,并且仅在我停止请求时才运行AJAX(因此在上传过程中途结束)。我迷失了为什么它不起作用。因此,非常感谢您的帮助。

我还发现奇怪的是,Chrome / Chromium似乎在不通知我的情况下使用上传进度更新了窗口状态栏。

我在哪里看不到我在哪里设置。 Chrome可能有内部进度表吗?

upload.js

$(document).ready(function()

{

$(\'form\').uploadProgress(

{

uploading: function(upload)

{

$(\'#percents\').html(upload.percents+\'%\');

$(\'#progressbar\').css({width: upload.percents+\'%\'});

},

progressUrl: \"/progress\",

interval: 3

});

})

jquery.uploadProgress.js

/*

* jquery.uploadProgress

*

* Copyright (c) 2008 Piotr Sarnacki (drogomir.com)

* - Original release.

*

* Copyright (c) 2011 Mathew Davies (thepixeldeveloper@googlemail.com)

* - Refactored a lot of code into their own functions

*

* Licensed under the MIT license:

* http://www.opensource.org/licenses/mit-license.php

*

*/

(function($)

{

/**

* Generate a UUID used to uniquely identify form uploads.

*

* @return string

*/

function generate_uuid()

{

var uuid = \"\";

for (i = 0; i < 32; i++)

{

uuid += Math.floor(Math.random() * 16).toString(16);

}

return uuid;

}

/**

* Calls the progress URL to get the latest statistics from

* the uploaded form.

*

* @return void

*/

function update(object, options)

{

$.ajax(

{

type: \'GET\',

cache: false,

dataType: options.dataType,

url: options.progressUrl,

beforeSend: function(xhr)

{

xhr.setRequestHeader(\"X-Progress-ID\", options.uuid);

},

success: function(upload)

{

alert(\'progress ...\');

if (upload)

{

if (upload.state == \'uploading\')

{

upload.percents = Math.floor((upload.received / upload.size) * 1024) / 10;

options.uploading(upload);

}

if (upload.state == \'done\' || upload.state == \'error\')

{

window.clearTimeout(options.timer);

}

if (upload.state == \'done\')

{

upload.percents = 100;

options.done(upload);

}

if (upload.state == \'error\')

{

upload.percents = 0;

options.error(upload);

}

}

}

});

}

/**

* Updates the form action to use the UUID.

*/

function update_form_action(form, uuid)

{

if(old_id = /X-Progress-ID=([^&]+)/.exec(form.attr(\"action\")))

{

var action = form.attr(\"action\").replace(old_id[1], uuid);

}

else

{

var action = form.attr(\"action\") + \"?X-Progress-ID=\" + uuid;

}

form.attr(\"action\", action);

}

$.fn.uploadProgress = function(options)

{

var options = $.extend(

{

dataType: \"json\",

interval: 2000,

progressUrl: \"/progress\",

start: function() {},

uploading: function() {},

done: function() {},

error: function() {},

timer: \"\"

}, options);

return this.each(function()

{

$(this).submit(function()

{

var $this = $(this);

// Generate a new UUID

options.uuid = generate_uuid();

// Update form action with ID

update_form_action($this, options.uuid);

// Start callback

options.start();

// Start process

options.timer = window.setInterval(function()

{

update($this, options)

},

options.interval * 1000);

});

});

};

})(jQuery);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值