场景：我有一个上传表单，它使用 nginx uploadProgress 模块报告上传进度。下面的代码在 Firefox 中运行良好，但对于 Chrome 和 Chromium，AJAX 在页面加载时不会被触发，并且只会在我停止请求时运行（所以上传到一半）。我不知道为什么它不起作用。因此，非常感谢任何帮助。
我还觉得奇怪的是，Chrome/Chromium 似乎在没有我告诉它的情况下使用上传进度更新窗口状态栏。
我看不到我在哪里设置它。Chrome有可能有一个内部进度表吗？
上传.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);