如何解决页面加载时,jQuery AJAX不会在Chrome / Chromium中启动
| 场景:我拥有的是一个上传表单,该表单使用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,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);
解决方法
似乎Webkit中存在一个已报告的问题,其中XmlHttpRequest在文件上载/表单发布期间无法按预期工作。
带此处的Webkit链接的Chrome错误报告:http://code.google.com/p/chromium/issues/detail?id=45196
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。